Question

我想在iPad网络应用上使用标准网页技术将完整的HTML页面加载到当前版本中（没有Sencha等框架）

我有一个内容页面和一个文章页面。我想将文章页面（包括此特定页面的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');
            });
        });
    });
}

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

1 个答案: