到外部网页加载到当前与Webkit内核/ jQuery的最佳途径 [英] Best way to load an external page into the current one with Webkit/jQuery

问题描述

我想一个完整的HTML页面加载到使用在iPad上的Web应用程序的标准网络技术当前的（如煎茶无框架​​等）

我有一个内容页和文章页。我想在文章页面（包括JavaScript / CSS这个特定页面）加载到一个新的div和过渡动画效果（滑动），但它似乎并没有工作。

使用jQuery负载功能，CSS / JS不是完全加载并只在Chrome的工作（而不是在iPad上）。有没有更好的方式来做到这一点？

CSS：

 ＃内容容器{
}＃文章容器{
位置：绝对的;
左：@defaultWidth;宽度：100％;
高度：100％;背景色：@darkGreyColour;-webkit-过渡：左1秒易用性的;
}＃内容container.animate {
左：-100％;
}＃文章-container.animate {
    左：0;
}
 

JS

 函数animateTransition（事件）{
    $（'＃物品的容器'）。负载（'/ #main'，函数（）{
        的console.log（动画...）;
        $（'＃内容容器'）addClass（'动画'）。
        $（'＃物品的容器'）addClass（'动画'）。
    }）;
}
 

解决方案

我会推荐使用＆LT; IFRAME＆GT; 来加载一个完整的HTML页面。使用jQuery的.load（）加载一个完整的HTML页面的一部分（例如 $（＃myElement）。负载（/ index.html的#main） ）只加载文档的那部分的HTML，所以它不会加载在文章页面的其他部分所定义的JS / CSS。您可以rel=\"nofollow\"> jQuery的.load API网页阅读更多关于这个问题在加载页面片段

使用＆LT; IFRAME＆GT; ：

 ＆LT; IFRAME SRC =theArticle.html＆GT;
    ＆LT; P＆GT;您的浏览器并不支援iframe＆LT; / P＆GT;
＆LT; / IFRAME＆GT;
 

使用jQuery和.load（）加载文章到＆LT; D​​IV＆GT; ：

 函数animateTransition（事件）{
    //加载包含在标签与#main的ID的HTML
    $（'＃物品的容器'）。负载（myArticle.html #main'，函数（）{
        //加载CSS
        $（'头'）。负载（myCSS.css'，函数（）{
            //加载JS
            $ .getScript（'myScript.js'，函数（）{
                的console.log（动画...）;
                $（'＃内容容器'）addClass（'动画'）。
                $（'＃物品的容器'）addClass（'动画'）。
            }）;
        }）;
    }）;
}
 

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

解决方案

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

这篇关于到外部网页加载到当前与Webkit内核/ jQuery的最佳途径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！