Best Way To Load An External Page Into The Current One With Webkit/jQuery

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 art

Solution 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');
            });
        });
    });
}