解释
处理jQuery Mobile
多个 HTML 文件时,重要的是要了解当您从index.html
*foobar.html
仅*加载第一页时。基本上,jQuery Mobile 将剥离页面的其余部分,包括HEAD
其余BODY
内容。
因此,在处理多个HTML
页面时,只有第一页可以有多个内页,所有其他HTML
页面只能有1页。在您的情况下,只有页面#foo
被加载到 DOM 中,页面#bar
被丢弃。
另外,我还有另一篇文章描述了如何jQuery Mobile
处理多个 HTML 页面加载。
概念证明
索引.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- META TAGS Declaration -->
<meta charset="UTF-8">
<title>TEst</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#foo', function(){
alert($('#body-test').html());
});
</script>
</head>
<body id="body-test">
<div data-role="page" id="portfolio" data-add-back-btn="true">
<div data-role="content" data-theme='c' >
<a href="test.html" data-role="button">Go to Bar</a>
</div>
</div><!-- Page Project #1 -->
</body>
</html>
测试.html
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style/jquery.mobile-1.3.1.css" />
<script src="jquery-js/jquery-1.10.1.js"></script>
<script src="jquery-js/jquery.mobile-1.3.1.js"></script>
<title>Foobar</title>
</head>
<body>
<div data-role="page" id="foo">
<div data-role="content">
<a href="#bar" data-role="button">Go to Bar</a>
</div>
</div>
<div data-role="page" id="bar">
<div data-role="content">
<p>Bar</p>
</div>
</div>
</body>
</html>
如果你运行这个例子,它会告诉你(提醒你)只有页面 #foo 被加载。