javascript - 使用 Webkit/jQuery 将外部页面加载到当前页面的最佳方式

Question

我想在 iPad 网络应用程序(没有像 Sencha 等框架)上使用标准网络技术将完整的 HTML 页面加载到当前页面中

我有一个内容页面和一个文章页面。我想将文章页面(包括此特定页面的 javascript/CSS)加载到新的 div 中并设置动画过渡(滑动)，但它似乎不起作用。

使用 jQuery 加载功能，CSS/JS 加载不完美，它只适用于 Chrome(不适用于 iPad)。有更好的方法吗？

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

我建议使用 <iframe>加载完整的 HTML 页面。使用 jQuery 的 .load() 加载完整 html 页面的一部分(例如 $("#myElement").load("/index.html #main") )只会加载文档该部分中的 html，因此它不会加载在文档的其他部分中定义的 js/css文章页面。您可以在 jQuery's .load API Page 的“加载页面片段”部分阅读有关此问题的更多信息.

使用 <iframe> :

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

使用 jQuery 和 .load() 将文章加载到 <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');
            });
        });
    });
}