从浏览器访问页面时执行js函数's后退按钮

Execute js function when accessing a page from browser's back button

本文关键字：按钮 函数 js 访问 浏览器 执行      更新时间：2023-09-26

我正在使用jquery mobile 1.2.0和jquery 1.7.2开发一个网站，在加载页面时尝试执行js函数时遇到问题。

通常的情况是，用户使用链接（锚）加载页面，因此我处理jquery移动事件"pageinit"，这很正常，但当用户使用浏览器的后退按钮访问页面时，我需要执行相同的代码/函数，在这种情况下，"pageinit"事件永远不会触发。

javascript函数修改UI，因此需要在调用函数之前加载UI。

我正在Safari 9.1（iOS 9.3）上测试它。

我的页面与此非常相似：

<section id="someid" data-role="page" data-theme="a">
<!-- Page content -->
</section>
<script type="text/javascript">
function myFunction() {
//some code to modify de UI on page loaded
}
$("#someid").on("pageinit", function (e) {
    var page = $(this);
    myFunction();
});
</script>

更新1:

我已经测试了这里列出的所有jquery mobile事件，但没有任何运气。

尝试pageshow和load事件！

根据文档：当会话历史记录条目被遍历到时，会触发pageshow事件。（这包括back/forward以及onload事件后的初始页面显示。）

同样仅供参考，看起来pageinit在1.4 中被取消了

$(document).on("pageshow", "#someid", function (e) {
    var page = $(this);
    myFunction();
});

最后我找到了这个SO问题，让我解决了这个问题，基本上是使用窗口事件"popstate"，这是我使用的确切代码：

<section id="someid" data-role="page" data-theme="a">
<!-- Page content -->
</section>
<script type="text/javascript">
function myFunction() {
//some code to modify de UI on page loaded
}
$("#someid").on("pageinit", function (e) {
    var page = $(this);
    myFunction();
});
var myCustomEvent = (navigator.userAgent.match('iPhone') != null) ? 'popstate' : 'pageshow';
$(window).on(myCustomEvent, function(e) {
    myFunction();
}
</script>

注1：与Safari Mobile不同的大多数浏览器都能完美地评估事件"pageshow"，因此它正在检查这些情况。

注2：我在Safari Mobile 9.1（iOS 9.3）上测试了此代码。

相关文章：