Question

您好我的移动应用程序中有两个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>

现在假设单击“索引”按钮，我转到example.html页面。单击example.html中的后退按钮，它再次转到index.html。一切都很好，但它不会打印console.log（“ * ** * **** ”）;如果我再次按下index.html然后打印它，我想要的是当我在example.html上时应该点击后退按钮打印它。

上面的代码有什么问题？为什么它会像这样？任何建议都将提前感谢。

Answer 1

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

Answer 2

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

如果您有按钮：

<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 ("*****************");
});

window.onbeforeunload在第二页中不起作用

2 个答案: