使用 jQuery Mobile 的外部链接和硬件后退按钮答案

【问题标题】：External link and hardware back button with jQuery Mobile使用 jQuery Mobile 的外部链接和硬件后退按钮
【发布时间】：2011-10-19 13:49:09
【问题描述】：

这是我第一个使用 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 事件，但我认为这不是解决问题的方法..

谢谢！

【问题讨论】：

我遇到过类似的情况，但与表单有关，其中后退箭头以某种方式保留了上次提交的表单。不好。没有解决办法？

标签： jquery android button mobile back

【解决方案1】：

我遇到了类似的问题。我设法将其缩小到与使用硬件后退按钮相关的问题。使用此按钮时，移动浏览器未启动 document.ready 或 pageinit 事件。此外，在按下返回按钮后再次从页面 B 转到 A 时，这些事件会触发不止一次。

绑定到 body 元素内的 onunload 解决了这个问题。在上面的示例中，将其包含在页面 A 的 body 标记中即可解决问题：

感谢 Pumbaa80 和 Nickolay Is there a cross-browser onload event when clicking the back button?

【讨论】：