Question

I would like to load a complete HTML page into the current one using standard web technologies on an iPad web app (no framework like Sencha, etc.)

I have a content page, and an article page. I want to load the article page (including javascript/CSS for this specific page) into a new div and animate the transition (sliding) but it does not seem to work.

Using jQuery load function, the CSS/JS is not perfectly loaded and it works only on Chrome (not on the iPad). Is there a better way to do so?

CSS:

#content-container {
}

#article-container {
position: absolute;
left: @defaultWidth;

width: 100%;
height: 100%;

background-color: @darkGreyColour;

-webkit-transition: left 1s ease-in; 
}

#content-container.animate {
left: -100%;
}

#article-container.animate {
    left: 0;
}

JS

function animateTransition(event) {
    $('#article-container').load('/ #main', function() {
        console.log("Animating...");
        $('#content-container').addClass('animate');
        $('#article-container').addClass('animate');
    });
}

Answer 1

I would recommend using an <iframe> to load a full HTML page. Using jQuery’s .load() to load a portion of a full html page (ex. $("#myElement").load("/index.html #main") ) only loads the html in that portion of the document, so it won’t load the js / css that’s defined in other portions of the article page. You can read more about the issue in the ‘Loading Page Fragments’ section of jQuery’s .load API Page.

Using an <iframe>:

<iframe src="theArticle.html">
    <p>Your browser does not support iframes.</p>
</iframe>

Using jQuery and .load() to load the article into the <div>:

function animateTransition(event) {
    // load the html contained in the tag with id of #main
    $('#article-container').load('myArticle.html #main', function() {
        // load the css
        $('head').load('myCSS.css', function() {
            // load the js
            $.getScript('myScript.js', function() {
                console.log("Animating...");
                $('#content-container').addClass('animate');
                $('#article-container').addClass('animate');
            });
        });
    });
}