[英]How to load external page into “container” div using jQuery Mobile?
I am building up a PhoneGap app using jQuery Mobile. 我正在使用jQuery Mobile构建PhoneGap应用程序。 I want the app to load a html-page from external source and put it to the "content" div of same html-page where the user clicked the link (but to another "page" div of JQM).
我希望该应用程序从外部源加载一个html页,并将其放置到用户单击链接的同一html页的“ content” div(但是到JQM的另一个“ page” div)。
Here's click-event -function for the link: 链接的点击事件功能如下:
$('#bookings_link').click(function(){'
$("#booking_content").load("http://www.pagetoload.com",function(){
$('#booking_content').trigger("pagecreate").trigger("refresh");
$.mobile.changePage( $("#bookings"), { transition: "slideup"} );
})
I have tried that using jQueryMobile's $.mobile.loadPage -function as well: 我也尝试过使用jQueryMobile的$ .mobile.loadPage -function:
$.mobile.loadPage("http://www.pagetoload.com",{pageContainer: $('#booking_content')});
$.mobile.changePage( $("#bookings"), { transition: "slideup"} );
With jQuery's load method, I got the following error message: Uncaught TypeError: Object [object DOMWindow] has no method 'addEvent' at file: and "Unknown chromium eroor: -6" 使用jQuery的load方法,我收到以下错误消息: 未捕获的TypeError:对象[object DOMWindow]在文件中没有方法'addEvent':和“ Unknown Chrome eroor:-6”
I have also tried to include the logic into the pagebeforechange-loop (http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic.html) but without results. 我也尝试将逻辑包含在pagebeforechange-loop(http://jquerymobile.com/demos/1.0/docs/pages/page-dynamic.html)中,但没有结果。 From that, the app is saying: *Uncaught TypeError: Cannot read property 'options' of undefined at file:///android_asset/www/jquery.mobile-1.1.1.min.js:81*
由此,应用程序说: *未捕获的TypeError:无法读取文件:///android_asset/www/jquery.mobile-1.1.1.min.js:81中未定义的属性“选项” *
I have set true the $.support.cors and $.mobile.allowCrossDomainPages settings for cross-domain linking. 我已经为跨域链接设置了$ .support.cors和$ .mobile.allowCrossDomainPages设置。
I am using jquerymobile 1.1.1 and jquery's core 1.7.1. 我正在使用jquerymobile 1.1.1和jquery的核心1.7.1。 I am testing it with Android SKD api level 16 AVD.
我正在使用Android SKD api级别16 AVD对其进行测试。
One weird thing is that I got the pageloading functionality working earlier with the same logic, but since I haven't used SVN I have no possibility to check where's the error in this. 一件奇怪的事情是,我使用相同的逻辑使页面加载功能更早地工作,但是由于我没有使用SVN,所以我无法检查其中的错误所在。
I am completely stuck with this and I would be very grateful if someone could show me the right direction. 我完全坚持这一点,如果有人可以向我展示正确的方向,我将不胜感激。
我认为您正在描述Phonegap子浏览器插件的功能,请查看:-)。
Here is my solution. 这是我的解决方案。 I calll the function app_getPage(filePath) to load a text string with the contents of a page.
我调用函数app_getPage(filePath)来加载带有页面内容的文本字符串。 Then I use JQUERY to update the HTML in that
<div>
as follows: 然后,我使用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();
}
Note that in my example the below function references appData.PageTopTag and appData.PageBottomTag , I use those just inside my <body>
tags so that I can strip out the enclosing document elements. 请注意,在我的示例中,以下函数引用了appData.PageTopTag和appData.PageBottomTag ,我只在
<body>
标记内使用了这些标记,以便可以去除封闭的文档元素。 In this instance they contain <!--FooTop-->
and <!--FooBottom-->
respectively. 在这种情况下,它们分别包含
<!--FooTop-->
和<!--FooBottom-->
。 This way I can use my favorite HTML editor to create the content I want to load and not worry about all the junkage it adds to my pages. 这样,我可以使用自己喜欢的HTML编辑器来创建要加载的内容,而不必担心它会添加到页面中的所有垃圾。 I also use appData.Debug to decide if I am in Debug mode for sending junk to the console.
我还使用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;
}
So if 'page/test.html' contained the following: 因此,如果“ 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>
You would get <div id="appTestDiv" data-role="content"></div>
loaded with: 您将获得
<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>
I know there are more compact ways of doing this and most of you will hate my formatting but this works for me, is clean and easy to read. 我知道可以使用更紧凑的方法来完成此操作,并且大多数人会讨厌我的格式设置,但这对我有用,干净而且易于阅读。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.