使用 jQuery Mobile 的外部链接和硬件后退按钮
这是我的第一个使用 jquery mobile 的网站，我在外部链接方面遇到了问题。
我将向您展示一个例子。
这是A页
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PageA</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="pageA" data-title="Page A" data-theme="b" data-dom-cache="false">
<div data-role="header" data-theme="b">
<h1>Page A</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li><a href="PageB.htm" rel="external">PageB</a></li>
</ul>
</div>
</div>
当我点击链接时，我将转到页面 B（到目前为止，一切正常）
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pag B</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="pageB" data-title="Page B" data-theme="b" data-dom-cache="false">
<div data-role="header" data-theme="b">
<h1>Page B</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>I am Page B!!!</p>
</div>
<!-- /content -->
<div data-role="footer" data-theme="c">
<h4>Test</h4>
</div>
<!-- /footer -->
</div>
当我在页面 B 中时，我按 Android 移动设备中的硬件后退按钮并返回到页面 A。
然后我再次按页面 A 中的链接。出现页面 B，但它也会以典型加载方式加载页面 A div 显示..
问题是？为什么会这样？其次，这样做的方法是什么？
我找到了一种方法来解决页面 B 中的 pagebeforehide 事件，但我认为这不是解决问题的方法..
谢谢！
This is my first web site with jquery mobile, and i am having problems with external links.
I´ll show yo one example.
This is Page A
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PageA</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="pageA" data-title="Page A" data-theme="b" data-dom-cache="false">
<div data-role="header" data-theme="b">
<h1>Page A</h1>
</div>
<!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="g">
<li><a href="PageB.htm" rel="external">PageB</a></li>
</ul>
</div>
</div>
When I click the link, I am going to Page B (so far, everything is ok)
<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pag B</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<link href="Style/Style.css" rel="stylesheet" type="text/css" />
<link href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
</head>
<body>
<!-- Start of first page -->
<div data-role="page" id="pageB" data-title="Page B" data-theme="b" data-dom-cache="false">
<div data-role="header" data-theme="b">
<h1>Page B</h1>
</div>
<!-- /header -->
<div data-role="content">
<p>I am Page B!!!</p>
</div>
<!-- /content -->
<div data-role="footer" data-theme="c">
<h4>Test</h4>
</div>
<!-- /footer -->
</div>
When I am in the Page B, I press the hardware back button in an Android Mobile device and going back to Pag A.
Then I press again the link in Page A. The Page B appears but it also load Page A with the tipical loading div showing..
The question is? why is this happenig?? and second what´s the way for doing this?
I´ve found a way to solve with the pagebeforehide event in page B but I think this is not the way to do that..
Thank you!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我也有类似的问题。我设法将其范围缩小到与硬件后退按钮的使用相关的问题。使用此按钮时，移动浏览器不会启动 document.ready 或 pageinit 事件。此外，按下后退按钮后再次从页面 B 转到页面 A 时，这些事件会多次触发。
绑定到 body 元素内的 onunload 解决了该问题。在上面的示例中，将其包含在页面 A 的 body 标记中可以解决问题：
感谢 Pumbaa80 和 Nickolay 点击时是否有跨浏览器 onload 事件后退按钮？
I was having a similar issue. I managed to narrow it to problems related to the use of the hardware back button. Mobile browsers did not launch the document.ready or pageinit event when using this button. Moreover, these events were firing more than once when going again from page B to A after pushing the back button.
Binding to onunload inside the body element fixed the issue. In the example above, including it on the body tag of page A solves the problem:
Thanks to Pumbaa80 and Nickolay Is there a cross-browser onload event when clicking the back button?