0

嗨，我的移动应用程序中有两个 html 页面，如下所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">   

     <a href="example.html"  data-role="button" id="myButton">Index</a>         

</div>



</div>
</body>
</html>

我的 example.html 就像：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery Mobile: Demos and Documentation</title>

<link rel="stylesheet"  href="jquery.mobile/jquery.mobile-1.1.0.css" />
<link rel="stylesheet" href="docs/assets/css/jqm-docs.css" />
<link rel="stylesheet" href="docsdemos-style-override.css" />
<script type="text/javascript" src="jquery.mobile/jquery-1.7.2.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.1.0.js"></script>
<!-- Uncomment following line to access PhoneGap APIs (not necessary to use PhoneGap to package web app) -->
<!-- <script type="text/javascript" charset="utf-8" src="cordova-1.6.1.js"></script>-->


</head> 
<body> 
<div data-role="page" id="jqm-home" class="type-home">
<div data-role="content">   

     <a href="example.html"  data-role="button" id="myButton1">Test</a>         

</div>

<script type="text/javascript">
    window.onbeforeunload = function(evt) {
        console.log ("*****************");
    } 
</script>




</div>


</body>
</html>

现在假设单击 Index 按钮我转到 example.html 页面。单击 example.html 中的后退按钮时，它会再次转到 index.html。一切都很好，但它不打印 console.log (" * ** * **** "); 如果我在 index.html 上再按一次，它就会打印它，我想要的是当我在 example.html 上时，它应该在单击后退按钮时打印它。

上面的代码有什么问题？为什么它会这样？任何建议将不胜感激。

4

2 回答 2

2

在 Jquery Mobile 标准使用中，您在网站上的空洞体验期间基本上停留在同一页面上。“更改”页面基本上是动态地将内容添加到当前文档中，这意味着它不会触发您的onbeforeunload事件。但是，您可以使用jquery 移动事件，具体取决于您想要采取的操作类型。很可能你会看pagebeforehide或pagehide

于 2012-10-04T08:00:04.017 回答
0

您可以做的是向后退按钮添加一个事件。

如果你有一个按钮：

<button id="backButton"> Go Back </button>

您可以通过 jquery 添加以下事件

    $("#backButton).click(function(){
       console.log ("*****************");
   });

请记住，如果您单击按钮，则会发布帖子并且页面将被刷新。所以你应该在另一个页面的准备好的文档中添加日志功能。

因此，如果 example.html 页面加载，您只需触发此事件

$(function(){
   //All code that starts when the page is fully loaded.
    console.log ("*****************");
});
于 2012-10-04T07:25:44.223 回答