javascript 使用 JQuery Mobile 在页面之间导航
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9081412/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Navigating between pages with JQuery Mobile
提问by Mono Developer
I am working on an application that uses JQuery Mobile. My application has 3 screens, that are separated into two separate ASP.NET files. These screens are "Page 1", Page 2 - A", and "Page 2 - B". These screens are placed in the following files:
我正在开发一个使用JQuery Mobile的应用程序。我的应用程序有 3 个屏幕，它们被分成两个单独的 ASP.NET 文件。这些屏幕是“Page 1”、Page 2 - A 和“Page 2 - B”。这些屏幕放置在以下文件中：
page1.aspx
页面1.aspx
Page 1
page2.aspx
page2.aspx
Page 2 - A
Page 2 - B
I have reasons for doing this, the sample that I'm providing here is just to demonstrate the problem. The problem is when I go from page 1 to page 2 - A, things work. However, when I click "B" on Page 2 - A, the screen will not navigate to the page. But, here is where it gets odd. If I navigate directly to page2.aspx in my browser, I can navigate to page 2 - B with no problem. The problem only happens when I start at page1.aspx. Can someone please help me out, my code for the pages looks like the following:
我有这样做的理由，我在这里提供的示例只是为了演示问题。问题是当我从第 1 页转到第 2 页时 - A，一切正常。但是，当我在第 2 页 - A 上单击“B”时，屏幕不会导航到该页面。但是，这就是奇怪的地方。如果我在浏览器中直接导航到 page2.aspx，则可以毫无问题地导航到第 2 页 - B。该问题仅在我从 page1.aspx 开始时发生。有人可以帮助我吗，我的页面代码如下所示：
page1.aspx
页面1.aspx
<!DOCTYPE html>
<html>
<head><title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/app.css" />
<script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript"> </script>
</head>
<body>
<form method="post" action="page1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNDMyNDU0NjAzZGRwU4yeA9j5ta11sndZ5ttoGphlk//bQegtegJWNYp1Rg==" />
</div>
<div data-role="page">
<div data-role="header"><h1>Page 1</h1></div>
<div data-role="content">
<a href="page2.aspx" data-role="button">Page 2</a></div>
</div>
</div>
</form>
</body>
</html>
page2.aspx
page2.aspx
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<link rel="stylesheet" href="/app.css" />
<script src="/resources/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="/resources/scripts/jquery.mobile-1.0.1.min.js" type="text/javascript">
</script>
</head>
<body>
<form method="post" action="page2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE"
value="/wEPDwUJNDMyNDU0NjAzZGS9YWabTaXXRTn8y1t/9nyD4FvN9HRt1cI9c8W8lj21mw==" />
</div>
<div id="A" data-role="page">
<div data-role="header"><h1>Page 2 - A</h1></div>
<div data-role="content">
<a href="#B " data-role="button">B</a></div>
</div>
</div>
<div id="B" data-role="page">
<div data-role="header"><h1>Page 2 - B</h1></div>
<div data-role="content">
I can't get to this page!
</div>
</div>
</form>
</body>
</html>
采纳答案by Phill Pafford
I think (But have not tried this) you need to use $.mobile.loadPage('testpage.html')to load the page into the DOM first, then use $.mobile.changePage('#bar')to transition.
我认为（但还没有尝试过）您需要$.mobile.loadPage('testpage.html')先将页面加载到 DOM 中，然后再用于$.mobile.changePage('#bar')过渡。
More on that here:
更多关于这里：
Also I've seen use of the target attributebut not sure if this would work using $.mobile.changePage()
我也看到了target 属性的使用，但不确定这是否可以使用$.mobile.changePage()
Also I think jQM Sees this as 'Deep Linking' but I see that's not what you're trying to accomplish
此外，我认为 jQM 将此视为“深度链接”，但我认为这不是您想要完成的
PLEASE NOTE: Since we are using the hash to track navigation history for all the Ajax 'pages', it's not currently possible to deep link to an anchor
(index.html#foo)on a page in jQuery Mobile, because the framework will look for a 'page' with an ID of#fooinstead of the native behavior of scrolling to the content with that ID.
请注意：由于我们使用散列来跟踪所有 Ajax“页面”的导航历史，因此目前无法
(index.html#foo)在 jQuery Mobile 中深度链接到页面上的锚点，因为框架将查找带有ID of#foo而不是滚动到具有该 ID 的内容的本机行为。
回答by Hyman
You need to mark the external page as external, ie. rel="external"
您需要将外部页面标记为外部，即。rel =“外部”
This will fix your problem:
这将解决您的问题：
<a href="page2.aspx" rel="external" data-role="button">Page 2</a>
回答by Aouadi Mohamed Ali
you can user target : target="_self" for me it's work 100%
你可以使用用户目标：target="_self" 对我来说它的工作 100%
回答by corthmann
Okay this is going to sound a bit weird. But I tried your example (by copying your codesamples) and experienced the same problem you have. However I noticed that you have a whitespace in your link to page #B, like it is shown below:
好吧，这听起来有点奇怪。但是我尝试了您的示例（通过复制您的代码示例）并遇到了与您相同的问题。但是我注意到您的页面链接中有一个空格，#B如下所示：
<a href="#B " data-role="button">...</a>
When I removed the whitespace everything worked fine. Try it out and let me know if it works for you.
当我删除空格时，一切正常。试试看，让我知道它是否适合你。
