Javascript JQuery：将多个页面合并为一个页面_Javascript_Jquery_Ajax_Cordova

Javascript JQuery：将多个页面合并为一个页面

javascript jquery ajax cordova

Javascript JQuery：将多个页面合并为一个页面,javascript,jquery,ajax,cordova,Javascript,Jquery,Ajax,Cordova,我正在使用phonegap和jQuery Mobile开发一个应用程序。Phonegap建议使用单一文档结构。由于一个文档中有5个或5个以上的div非常不清楚，所以我尝试将我的页面（div）拆分为多个文档。phonegap加载应用程序后，我想将这些文档插入index.html function loadPage(external_document) { var docname=external_document+".html"; $.get(docname, function(d

我正在使用phonegap和jQuery Mobile开发一个应用程序。Phonegap建议使用单一文档结构。由于一个文档中有5个或5个以上的div非常不清楚，所以我尝试将我的页面（div）拆分为多个文档。phonegap加载应用程序后，我想将这些文档插入index.html

function loadPage(external_document) {
    var docname=external_document+".html";
    $.get(docname, function(data) {
        console.log(docname+" loading");
        $("body").append($(data).find("body"));
        $("head").append($(data).find("head"));
        console.log(docname+" loaded");
    });

}

document.addEventListener("deviceready", function(){
    loadPage("DialogCredentials");
}, false);

DialogCredentials.html

<html>
<head>
     <script type="text/javascript" src="js/DialogCredentials.js"></script>
</head>
<body>  
    <div data-role="page" id="dlg_credentials">
    <div data-role="header"><h1>Login</h1></div>
    <div data-role="content">
    ... 
</div>
</div><!-- /page -->
</body>
</html>


登录
...

一旦loadPage被执行，就会有一个

动态加载是几个Javascript框架的一个特性。例如AngularJS和Backbone.js。也许可以看看他们加载多个视图的方法
我以前开发过一个应用程序，它通过在index.html中为每个视图添加一个空div，然后根据需要动态加载每个视图的Javascript来实现这一点。视图的Javascript负责将HTML呈现到该视图的div中。
无需为您设置测试用例，如果您真的想分离页面以简化编码，我建议使用jQuery Mobile的标准方式加载页面，即
$.mobile.changePage( "about/us.html", { transition: "slideup"} );

这样，您就不会重新发明轮子，它满足了您的要求。在任何情况下，与您建议的解决方案相比，开销都可以忽略不计，更不用说考虑到您希望快速呈现第一个页面，而不是在任何情况下呈现任何html之前插入许多页面来阻止。由于它们在设备上是本地的，因此Phonegap将能够非常快速地为它们提供服务
通过jQuery Mobile加载页面时需要记住的一点是，它会将目标页面中的任何内容从
data-role="page|dialog|popup"

标记，因此要加载定制的特定于页面的javascript，我建议您在
data-role="page"

打开标记并将任何页面初始化设置为在“pageinit”上发生

$（document.bind（'pageinit'，initializeOptions（））；
函数初始化选项（）{
//在这里进行页面初始化。
}

然后根据需要继续页面的其余部分。这样，当通过$.mobile.changePage方法加载页面时，它将被解析
希望有帮助
<div data-role="page" id="options" data-theme="a">
<script type="text/javascript">
    $(document).bind('pageinit', initializeOptions());
    function initializeOptions() {
        // do your page initialization here . . . 
    }
</script>
<!-- rest of page continues here . . . . -->