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>:

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

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

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