我有page1这是index.html，它是一个独立的网站，包括标题和脚本等。我在此页面上有一个按钮，单击该按钮将通过ajax加载page2并将page2插入page1。 Page2只是div data-role =“page”和html，它不是一个独立的页面。但是，url更改为page2.html然后如果我“刷新”页面它不会加载完整的页面，因为page2不是一个完整的页面，它只是被注入page1。
我尝试设置data-url =“index.html＆amp; dashboard”（仪表板是第2页的主要ID），在这种情况下，网址看起来正确，因为它仍然是index.html＆amp; dashboard，因此页面刷新会重新加载page1即使你在第2页。但是现在，jquery一直疯狂地坐在加载屏幕上，因为它无法找到“仪表板”，因为该内容仅在用户点击按钮后添加。
我该如何解决这个问题？
感谢。
page1 index.html
<!DOCTYPE HTML>
<html>
<head>
<title>title</title>
<script><script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/global.js"></script>
<script type="text/javascript" charset="utf-8" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" charset="utf-8" src="cordova-1.7.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile.js"></script>
<script type="text/javascript" charset="utf-8" src="js/login.js"></script>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Login</h1>
</div>
<!-- /header -->
<div data-role="content">
<div class="row">
<label for="login_name">Login Name:</label> <input
class="ui-input-text" type="text" name="login_name" id="login_name" />
</div>
<div class="row">
<label for="basic">Password:</label> <input class="ui-input-text"
type="password" name="password" id="password" />
</div>
<div class="row">
<input type="checkbox" name="remember" id="remember" class="custom"
data-mini="true" /> <label for="remember">Remember Me</label>
</div>
<div class="row">
<input type="submit" id="submit" name="submit" value="Submit" />
</div>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
</html>
page2 dashboard.html
<div id="dashboard" data-role="page" data-theme="b" data-url="index.html&dashboard">
<div data-role="header" data-theme="b">
<h1 id="page_title">Dashboard</h1>
</div>
login.js
$(function() {
$("#submit").click(function() {
if ($("#login_name").val() == "") {
alert("Please enter a login name");
return false;
}
if ($("#password").val() == "") {
alert("Please enter a password");
return false;
}
$.post(URL + 'login', {
'APIKEY' : APIKEY,
'login' : $("#login_name").val(),
'password' : $("#password").val()
}, function(data) {
if (data.error == "") {
$.mobile.changePage("dashboard.html", { transition : "slide" });
} else {
alert(data.error);
}
}, "json");
});
}）;
答案 0 :(得分：7)
简短的回答是jQuery Mobile希望您使用散列来表示单个页面的状态：
相反，当您应该只是调用JavaScript来动态更改第一页上的内容以表示第二页时，您正在加载一个全新的页面。
如果简短的回答有意义，那太好了！如果没有，那么很长的答案非常详细，并描述了两种解决这个问题的方法。
您基本上要问的是如何构建多页移动网站，并且可以通过标识资源的URI访问这两个页面。
您可以使用两种方法来解决此问题。
多页模板：
对于jQuery mobile，这是通过jQuery Mobile Multi-page Template完成的。
一般的想法是，您的两个页面都在同一个HTML文档中，如下所示：
<head>
</head>
<!-- This is your FIRST page -->
<div data-role="page" id="one">
<div data-role="header">
<h1>Multi-page</h1>
</div><!-- /header -->
<div data-role="content" >
<h2>One</h2>
<p>I have an id of "one" on my page container. I'm first in the source order so I'm shown when the page loads.</p>
<h3>Show internal pages:</h3>
<p><a href="#two" data-role="button">Show page "two"</a></p>
<p><a href="#popup"data-role="button" data-rel="dialog" data-transition="pop">Show page "popup" (as a dialog)</a></p>
</div><!-- /content -->
<div data-role="footer" data-theme="d">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page one -->
<!-- This is your SECOND page -->
<!-- Start of second page: #two -->
<div data-role="page" id="two" data-theme="a">
<div data-role="header">
<h1>Two</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<h2>Two</h2>
<p>I have an id of "two" on my page container. I'm the second page container in this multi-page template.</p>
<p>Notice that the theme is different for this page because we've added a few <code>data-theme</code> swatch assigments here to show off how flexible it is. You can add any content or widget to these pages, but we're keeping these simple.</p>
<p><a href="#one" data-direction="reverse" data-role="button" data-theme="b">Back to page "one"</a></p>
</div><!-- /content -->
<div data-role="footer">
<h4>Page Footer</h4>
</div><!-- /footer -->
</div><!-- /page two -->
</body>
接下来，jQuery Mobile基本上做的是它使用CSS来隐藏ID =“2”的DIV元素，并且只显示id =“one”的div。当用户点击带有'href =“＃two”的超链接时，有一个监听器拦截hashChange事件并触发一些隐藏DIV的JavaScript代码，id =“one”并显示ID =“2”的DIV ”
这使页面转换显得非常流畅和快速，无需前往服务器获取HTML标记。
动态互动内容：
如果您的数据更具动态性，那么另一种选择是使用jQuery Mobile Dynamic Page Injection。此过程的一般前提类似于多页面模板，因为浏览器会侦听hashChange事件，除了更改页面之外，它还向服务器发出AJAX请求以检索JSON内容。
<div id="home" data-role="page">
<div data-role="header"><h1>Categories</h1></div>
<div data-role="content">
<h2>Select a Category Below:</h2>
<ul data-role="listview" data-inset="true">
<li><a href="#category-items?category=animals">Animals</a></li>
<li><a href="#category-items?category=colors">Colors</a></li>
<li><a href="#category-items?category=vehicles">Vehicles</a></li>
</ul>
</div>
</div>
单击“动物”类别时，将隐藏id =“home”DIV。在此示例中，不是重新加载页面，而是动态生成HTML并使用JSON对象的结果填充。
以下是处理显示正确内容的代码：
// Load the data for a specific category, based on
// the URL passed in. Generate markup for the items in the
// category, inject it into an embedded page, and then make
// that page the current active page.
function showCategory( urlObj, options )
{
var categoryName = urlObj.hash.replace( /.*category=/, "" ),
// Get the object that represents the category we
// are interested in. Note, that at this point we could
// instead fire off an ajax request to fetch the data, but
// for the purposes of this sample, it's already in memory.
category = categoryData[ categoryName ],
// The pages we use to display our content are already in
// the DOM. The id of the page we are going to write our
// content into is specified in the hash before the '?'.
pageSelector = urlObj.hash.replace( /\?.*$/, "" );
if ( category ) {
// Get the page we are going to dump our content into.
var $page = $( pageSelector ),
// Get the header for the page.
$header = $page.children( ":jqmData(role=header)" ),
// Get the content area element for the page.
$content = $page.children( ":jqmData(role=content)" ),
// The markup we are going to inject into the content
// area of the page.
markup = "<p>" + category.description + "</p><ul data-role='listview' data-inset='true'>",
// The array of items for this category.
cItems = category.items,
// The number of items in the category.
numItems = cItems.length;
// Generate a list item for each item in the category
// and add it to our markup.
for ( var i = 0; i < numItems; i++ ) {
markup += "<li>" + cItems[i].name + "</li>";
}
markup += "</ul>";
// Find the h1 element in our header and inject the name of
// the category into it.
$header.find( "h1" ).html( category.name );
// Inject the category items markup into the content element.
$content.html( markup );
// Pages are lazily enhanced. We call page() on the page
// element to make sure it is always enhanced before we
// attempt to enhance the listview markup we just injected.
// Subsequent calls to page() are ignored since a page/widget
// can only be enhanced once.
$page.page();
// Enhance the listview we just injected.
$content.find( ":jqmData(role=listview)" ).listview();
// We don't want the data-url of the page we just modified
// to be the url that shows up in the browser's location field,
// so set the dataUrl option to the URL for the category
// we just loaded.
options.dataUrl = urlObj.href;
// Now call changePage() and tell it to switch to
// the page we just modified.
$.mobile.changePage( $page, options );
}
}
另请注意，在查看“类别”页面和“动物”页面的URL时，您可以看到每次HTML文档都相同。区别在于哈希值。
http://jquerymobile.com/demos/1.1.0/docs/pages/dynamic-samples/sample-reuse-page.html
当页面加载时，哈希值用于表示页面的状态。由于浏览器大部分是无状态的，哈希是我们可用来帮助确定状态的一个技巧应该向用户显示一个页面。
只需将您的changePage方法调用与类别页面中菜单中使用的URL进行比较：
<li><a href="#category-items?category=animals">Animals</a></li>
<li><a href="#category-items?category=colors">Colors</a></li>
<li><a href="#category-items?category=vehicles">Vehicles</a></li>
请注意，当用户单击链接时，唯一更改的是hashvalue，页面永远不会重新加载。但在您的示例中，您实际上正在加载一个全新的页面：
// this is a new page, not a hash
$.mobile.changePage("dashboard.html", { transition : "slide" });
从逻辑上讲，您需要重新考虑代表网页的策略。为了充分利用jQuery Mobile，请将您的第一个HTML页面视为所有CSS，JavaScript和静态内容的框架。
之后，您请求的所有资源都应该由具有相同页面的网址标识，后跟哈希值。
例如，如果您的静态页面是“index.html”，那么您的信息中心可能是“index.html＃dashboard”。您也可以将仪表板HTML包含在id =“dashboard”DIV中，并使用来自服务器的数据动态填充它，或者您可以通过AJAX加载HTML和数据。
第二点是，任何直接访问您的仪表板的人都需要访问“/index.html#dashboard”，这将加载您的原始页面，触发一些检查哈希的JavaScript，识别它包含“仪表板”，以及然后通过拉回动态数据来转换到仪表板页面。
有关详细信息，请参阅jQuery Page Dynamic Documentation。