如何使用 jQuery Mobile 将外部页面加载到“容器”div 中？答案

【问题标题】：How to load external page into "container" div using jQuery Mobile?如何使用 jQuery Mobile 将外部页面加载到“容器”div 中？
【发布时间】：2012-09-22 11:42:31
【问题描述】：

我正在使用 jQuery Mobile 构建一个 PhoneGap 应用程序。我希望应用程序从外部源加载一个 html 页面，并将其放到用户单击链接的同一 html 页面的“内容”div 中（但放到 JQM 的另一个“页面”div 中）。

"#booking-content" 是我想要外部页面的内容 div 加载到。
“#bookings”是页面 div 我要加载并在
外部页面已加载。
"#bookings_link" 是用户点击的链接的 ID 和位置函数调用的来源。

这是链接的点击事件功能：

$('#bookings_link').click(function(){'
    $("#booking_content").load("http://www.pagetoload.com",function(){
        $('#booking_content').trigger("pagecreate").trigger("refresh");
        $.mobile.changePage( $("#bookings"), { transition: "slideup"} );
})

我也尝试过使用 jQueryMobile 的 $.mobile.loadPage -function：

$.mobile.loadPage("http://www.pagetoload.com",{pageContainer: $('#booking_content')});
$.mobile.changePage( $("#bookings"), { transition: "slideup"} );

使用 jQuery 的加载方法，我收到以下错误消息：Uncaught TypeError: Object [object DOMWindow] has no method 'addEvent' at file: and “未知铬腐蚀：-6”

我还尝试将逻辑包含在 pagebeforechange-loop (http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic.html) 中，但没有结果。从此，应用程序说：*Uncaught TypeError: Cannot read property 'options' of undefined at file:///android_asset/www/jquery.mobile-1.1.1.min.js:81*

我已经为跨域链接设置了 $.support.cors 和 $.mobile.allowCrossDomainPages 设置。

我正在使用 jquerymobile 1.1.1 和 jquery 的核心 1.7.1。我正在使用 Android SKD api level 16 AVD 对其进行测试。

一个奇怪的事情是，我之前的页面加载功能使用相同的逻辑工作，但由于我没有使用 SVN，我无法检查其中的错误在哪里。

我完全坚持这一点，如果有人能告诉我正确的方向，我将不胜感激。

【问题讨论】：

好吧，我想我可以通过使用jQuery的.get函数来获取外部页面的内容，适当地格式化获取的数据并将其放入div中......但是因为我很懒，我更喜欢那些用来做我上面说的东西的功能。所以如果有人知道为什么会显示这些错误消息，请回答:)谢谢！！

标签： jquery cordova jquery-mobile

【解决方案1】：

我认为您是在描述 Phonegap childbrowser plugin 的功能，请查看 :-)。

【讨论】：

对不起，不是这样。 Childbrowser 插件只是打开一个新的浏览器，当您不想在同一个浏览器窗口中显示内容时，您可以在其中做一些事情。我想要将外部页面的内容加载到当前页面的 div 中的功能。

【解决方案2】：

这是我的解决方案。我调用函数 app_getPage(filePath) 来加载包含页面内容的文本字符串。然后我使用 JQUERY 更新 <div> 中的 HTML，如下所示：

// Fetch a page into a var
var pageText = app_getPage('pages/test.html');
// Did it work?
if(pageText) 
{
    // Yes it did, stick it out there
    $('#appTestDiv').html(pageText);
    $('#appMainDiv').trigger('create');  // Probably not necessary
}
else
{
    // No good so handle the failure here
    app_doEndOfWorldPanicRebootAndMeltDown();
}

请注意，在我的示例中，下面的函数引用了 appData.PageTopTag 和 appData.PageBottomTag，我只在 <body> 标记中使用它们，这样我就可以去掉封闭的文档元素。在这种情况下，它们分别包含  和 。这样我就可以使用我最喜欢的 HTML 编辑器来创建我想要加载的内容，而不必担心它添加到我的页面中的所有垃圾。我还使用 appData.Debug 来决定我是否处于调试模式以将垃圾发送到控制台。

function app_getPage(filePath)
{
    // Get the file name to load
    if(appData.Debug) console.log(arguments.callee.name + ":LoadFile:" + filePath);        
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET",filePath,false);
    xmlhttp.send(null);
    // Did we get the file?
    if(xmlhttp.status != 0)
    {
        // Yes, remember it
        var fileContent = xmlhttp.responseText;
        if(appData.Debug) console.log("LoadFile-Success");
    }
    else
    {
        // No, return false
        if(appData.Debug) console.log("LoadFile-Failure");
        return false;
    }
    if(appData.Debug) console.log("FileContent-Original:" + fileContent);
    // Get the indexes of the head and tails
    var indexHead = fileContent.indexOf(appData.PageTopTag);
    indexHead = indexHead >= 0 ? indexHead : 0;
    var indexTail = fileContent.indexOf(appData.PageBottomTag);
    indexTail = indexTail >= 0 ? indexTail : fileContent.length();
    // Now strip it
    fileContent = fileContent.substr(indexHead,indexTail);
    if(appData.Debug) console.log("FileContent-Stripped:" + fileContent);
    // Return the data
    return fileContent;
}

所以如果 'page/test.html' 包含以下内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Title Foo</title>
  </head>
  <body>
    <!--FooTop-->
      <div data-role="controlgroup" data-type="horizontal" style="text-align: center" data-mini="true">
        <a data-role="button" href="geo:42.374260,-71.120824?z=2">Zoom=2</a>
        <a data-role="button" href="geo:42.374260,-71.120824?z=12">Zoom=12</a>
        <a data-role="button" href="geo:42.374260,-71.120824?z=23">Zoom=23</a>
      </div>
    <!--FooBottom-->
  </body>
</html>

你会得到 <div id="appTestDiv" data-role="content"></div> 加载：

<div data-role="controlgroup" data-type="horizontal" style="text-align: center" data-mini="true">
  <a data-role="button" href="geo:42.374260,-71.120824?z=2">Zoom=2</a>
  <a data-role="button" href="geo:42.374260,-71.120824?z=12">Zoom=12</a>
  <a data-role="button" href="geo:42.374260,-71.120824?z=23">Zoom=23</a>
</div>

我知道有更紧凑的方法可以做到这一点，你们中的大多数人会讨厌我的格式，但这对我有用，干净且易于阅读。

【讨论】：