jQuery Mobile 多个 HTML 文件
这很烦人，但我正在构建一个 jQuery 移动网站。但是，如果我有一个名为 about 的页面，我希望将其放在名为 about.html 的文件中。我确实设法让它工作，但突然间我无法获得打开单独页面的链接。我尝试了各种方法，现在我得到了一张白页。
这是我一直在弄乱的测试代码：
Index:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is ready
//
function onDeviceReady() {
// Empty
}
$('#about').live('pagecreate',function(event){ AboutTest(); });
$('#test2').live('pagecreate',function(event){ alert("loaded the page 2!"); });
function AboutTest(){
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device PhoneGap: ' + device.phonegap + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
</head>
<body onload="onLoad()">
<div data-role="page" id="home">
<div data-role="header"><h2>Page 1</h2></div>
<div data-role="content">
<a href="about.html" data-url="about.html">testing</a>
</div><!-- /content -->
<div data-role="footer"><h4>Footer</h4></div>
</div><!-- /page -->
</body>
</html>
Here is my test page to link to, about.html:
<div data-role="page" id="about" data-title="about">
<div data-role="header"><h1>Page 2</h1></div>
<div data-role="content"><p id="deviceProperties">Loading device properties...</p></div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
现在这一切都工作正常，JavaScript 代码运行等等。然后我有改变了一些东西。我不知道是什么，但我已经把它弄坏了，而且我一辈子都看不到它。将所有页面包含在一页中的整个想法看起来是如此愚蠢和无意义。
This is quite annoying, but I am building a jQuery mobile site. But if I have a page called about, I want this in a file called about.html. I did manage to get this to work, but all of a sudden I can't get a link to open a separate page. I have tried all sorts of things and now I get a white page.
Here is the test code I have been messing with:
Index:
<!DOCTYPE html>
<html>
<head>
<title>Notification Example</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for PhoneGap to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// PhoneGap is ready
//
function onDeviceReady() {
// Empty
}
$('#about').live('pagecreate',function(event){ AboutTest(); });
$('#test2').live('pagecreate',function(event){ alert("loaded the page 2!"); });
function AboutTest(){
var element = document.getElementById('deviceProperties');
element.innerHTML = 'Device Name: ' + device.name + '<br />' +
'Device PhoneGap: ' + device.phonegap + '<br />' +
'Device Platform: ' + device.platform + '<br />' +
'Device UUID: ' + device.uuid + '<br />' +
'Device Version: ' + device.version + '<br />';
}
</script>
</head>
<body onload="onLoad()">
<div data-role="page" id="home">
<div data-role="header"><h2>Page 1</h2></div>
<div data-role="content">
<a href="about.html" data-url="about.html">testing</a>
</div><!-- /content -->
<div data-role="footer"><h4>Footer</h4></div>
</div><!-- /page -->
</body>
</html>
Here is my test page to link to, about.html:
<div data-role="page" id="about" data-title="about">
<div data-role="header"><h1>Page 2</h1></div>
<div data-role="content"><p id="deviceProperties">Loading device properties...</p></div>
<div data-role="footer"><h4>Footer</h4></div>
</div>
Now this all did work fine, the JavaScript code ran, etc. Then I have changed something. I am not sure what, but I've broken it and for the life of me I can't see it. The whole idea of all pages within one page seems so stupid and sensless.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您从内容中的链接中删除
"data-url='about.html'"，它对我有用。该属性适用于页面 div。第二个页面 (about.html) 可以是完整的 HTML 页面，只要它包含正文中的当前文本即可。 jQuery Mobile 以这种方式工作得很好，因为它将加载整个文件，然后提取页面 div。您可以将多个页面视为在 DOM 中缓存内容的一种方式（如果这看起来更明智的话）！
It works for me if you remove the
"data-url='about.html'"from the link in the content. This attribute is meant for the page div.You second page (about.html) can be a complete HTML page, as long as it contains the current text in the body. jQuery Mobile works just fine that way as it will load the whole file and then extract the page div. You can think of the multiple pages in one as a way of caching stuff in the DOM if that seems more sensible!
链接到“外部页面”的链接必须具有以下属性：
您可以选择添加
data-ajax="false"以便您的链接如下所示：
或
Your link to link to the "external page" must have the following attribute:
You can optionally add
data-ajax="false"So that your link looks like:
or
您必须将“关于”页面的代码作为单独的 div 包含在主索引页面中。除非您有特殊原因需要多一页？这也将使您的页面加载速度更快（将所有内容保持在同一页面上）。
所以索引现在会有：
这有意义吗？
另外，您正在经历加载 jQuery 的过程，因此您应该真正使用 jQuery 的内置 DOM 导航来更新 div 内容 - 这要容易得多！然后您可以删除所有 onLoad() 事件等。
如果您想在真实外部页面中加载页面（正如您的OP所说），您还可以将 rel="external" 添加到'关于'链接。
You have to include the code for the 'about' page in the main index page as a separate div. Unless you have a special reason for having more than one page? This will also make your page load faster (keeping everything on the same page).
So index would now have:
Does that make sense?
Also, you are going through the process of loading jQuery, so you should really use jQuery's built-in DOM navigation to update the div contents - it is much much easier! Then you can remove all the onLoad() events etc.
If you want to load the page in a real external page (as your OP says), you could also add rel="external" to the 'about' link.