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

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

“＃booking-content”是内容div，我希望外部页面加载到。
“#bookings”是页面div，我想加载并显示
外部页面已被加载。
“#bookings_link”是用户点击链接的ID，以及函数调用的起源地址。

这里的点击事件的链接-function：

$('#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功能全，以及：

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

使用jQuery的load方法，我收到以下错误消息：未捕获的TypeError：对象[对象DOMWindow]在文件中没有方法'addEvent'：和“未知铬eroor：-6”

我还试图以包括逻辑进入pagebeforechange环（http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic。 HTML）但没有结果。从这一点，该应用程序是在说：*遗漏的类型错误：无法在文件读取的未定义的属性“选项”：///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，我没有可能检查错误在哪里。

我完全被这个问题所困扰，如果有人能为我指出正确的方向，我将非常感激。

来源

2012-09-22 BigGiantHead

好吧，我想我可以通过使用jQuery的.get函数获取外部页面的内容，适当地格式化所提取的数据并将其放到div中。但是因为我很懒，我宁愿函数是为了做我上面说的东西..所以如果任何人有一些线索为什么显示这些错误信息，请回答:)谢谢！ – BigGiantHead

我想你是在描述Phonegap childbrowser plugin的功能，请查看:-)。

来源

2012-09-22 11:59:05 Nelson

我很抱歉，但事实并非如此。 Childbrowser插件只是打开一个新的浏览器，当你不想在同一个浏览器窗口中显示内容时，你可以做些什么。我想要将外部页面的内容加载到当前页面的div中。 – BigGiantHead

这是我的解决方案。我调用函数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; 
}

所以，如果'页/ 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>

我知道有更多的这样做的紧凑方式，大多数人会讨厌我的格式，但这对我很有用，干净，易于阅读。

来源

2013-06-02 20:50:10 BigMikeL

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

回答

相关问题