这很烦人，但我正在构建一个 jQuery 移动网站。但是，如果我有一个名为 about 的页面，我希望它位于一个名为 about.html 的文件中。我确实设法让它工作，但突然间我无法获得打开单独页面的链接。我尝试了各种方法，现在我得到了一个白页。
这是我一直在搞乱的测试代码:
索引:
<!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>
这是我要链接到的测试页面，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 代码运行，等等。然后我改变了一些东西。我不确定是什么，但我把它弄坏了，我这辈子都看不到它了。一个页面中包含所有页面的整个想法看起来是如此愚蠢和毫无意义。
最佳答案
如果您从内容中的链接中删除 "data-url='about.html'"，它对我有用。此属性适用于页面 div。
您的第二页 (about.html) 可以是一个完整的 HTML 页面，只要它包含正文中的当前文本即可。 jQuery Mobile 以这种方式工作得很好，因为它将加载整个文件，然后提取页面 div。如果这看起来更合理，您可以将多个页面视为在 DOM 中缓存内容的一种方式!
关于html - jQuery Mobile 多个 HTML 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/6097905/