如何使用 jQuery Mobile 和 PhoneGap 将 HTML 文件加载到 data-role=page 中？答案

【问题标题】：How to load HTML files into data-role=page with jQuery Mobile and PhoneGap?如何使用 jQuery Mobile 和 PhoneGap 将 HTML 文件加载到 data-role=page 中？
【发布时间】：2012-12-22 22:30:52
【问题描述】：

我想要这个：使用 jquery mobile 和 phonegap 将 html 文件加载到 data-role=page 中：我的项目有很多带有独立页面的小 HTML 文件。

我用：

index.html:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>
            Inicio :: Autenticacion
        </title>
        <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
        <link rel="stylesheet" href="jsmobile/jquery.mobile-1.2.0.min.css" type="text/css">
        <script src="jsmobile/jquery.js" type="text/javascript"></script>
        <script src="jsmobile/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
        <script language="javascript" type="text/javascript">


$(document).ready(function() {
  $('#boton').bind('click', function(event) {
    $.mobile.loadPage("Fichero/index.html",{pageContainer:$("#container1")});

  });
});

        </script>
    </head>
    <body>
        <div data-role="page" id="container0">
            <div data-role="content">
         <a  id="boton" >Change Page</a>
            </div>
        </div>


        <div  id="container1">
        </div>

    </body>
</html>

文件：Fichero/index.html

<div date-role="page" id="micro">
    <div data-role="header" >
        <h1>Test Heas</h1>
    </div><!-- /header -->
    <div data-role="content"  > 
     Test here..
    </div><!-- /content -->
    </div>

当用户单击更改页面链接时，我想从容器 1 中的 Fichero/index.html 加载 html 内容，但它不起作用。

它将内容加载到 DIV id="container1" 和 DOM 中，但不显示/刷新（就像隐藏一样）。

有什么方法可以做一个简单的html文件外部加载和DOM刷新可见HTML代码加载？

提前致谢。

【问题讨论】：

标签： jquery cordova jquery-mobile

【解决方案1】：

您的 html 与 jquery mobile 所需的结构不匹配，因此您什么也看不到。

任何应该可见的 html 都需要在 data-role="content" div 内，在 data-role="page" div 内

如果您只想加载外部 html，只需执行 ajax 调用（但我认为正确的 jQuery 移动方式在转换方面更好。示例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title> Inicio :: Autenticacion </title>
    <meta name="viewport" content="width=device-width,height=device-height, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#boton').bind('click', function(event) {
                $.get('Fichero/index.html').success(function(html) {
                    $('#container1').html(html);
                });

            });
        });

    </script>
</head>
<body>
    <div data-role="page" id="container0">
        <div data-role="content">
            <a  id="boton" >Change Page</a>

            <!--
            Place the Container here because
            jQuery Mobile data-role="page" defines a browser fullscreen page 
            (the dataroles are rules for formating a page and there can be only one visible page)
            -->
            <div  id="container1"></div>
        </div>
    </div>

</body>

【讨论】：

我们可以加载任何外部的部分 HTML 页面吗？
是的。如果您只需要外部页面中的部分，则在 ajax 调用完成后提取客户端的部分
如何解压？这就是问题。我们可以在 InAppBrowser 中打开部分 HTML 页面吗？
谢谢！这很有帮助。只是最后一件事！如何加载外部链接的部分 HTML？比如，stackoverflow 网站的任何部分内容。
不可能直接...因为出于安全原因不允许跨域请求。仅当服务器启用了 CORS 或具有 JSONP 接口时才有可能