Safari <body onload> 事件不会从后退按钮触发答案

【问题标题】：Safari <body onload> event doesn't trigger from the back buttonSafari <body onload> 事件不会从后退按钮触发
【发布时间】：2019-05-22 23:33:21
【问题描述】：

当通过后退按钮进入页面时，我似乎无法在 Safari 中触发 body onload="..." 事件。它在 FF 和 IE 中运行良好。有 Javascript 或 jQuery 解决方案吗？

任何帮助表示赞赏。

【问题讨论】：

它可以在 chrome 中使用吗？
onload 事件附加的代码有什么作用？您确定事件根本没有触发，还是只是没有做任何可见的事情？
豪尔赫·皮尼奥。我还没试过 Chrome。仍在浏览器中工作...
这是一个已知问题。好的一面是 Safari 像表单元素状态一样“缓存” UI 状态。
安东尼。它根据标志值刷新页面。我设置了一个警报，看看它是否在使用后退按钮时触发。警报在 FF 和 IE 中正常显示，但在 Safari 中没有。因此不会发生刷新。

标签： javascript jquery safari onload back

【解决方案1】：

试试：

window.addEventListener("pageshow", function() {
  alert('page shown');
}, false);

对于 Opera 浏览器，请阅读：http://samuli.hakoniemi.net/onload-issues-with-opera/

【讨论】：

Zvona，我已经尝试过了，但没有任何反应。代码示例是否适合剪切和粘贴到我的网站中，即是否需要更改任何内容？
这样就好了。我用 Chrome 对其进行了测试，它工作正常，不了解 Safari。你可以阅读这篇文章，如果有帮助的话：webkit.org/blog/516/webkit-page-cache-ii-the-unload-event
zvona，我在 Safari 和 FF 中触发了 pageshow，但在 IE 中没有触发。你知道它是否也应该在那里工作吗？如果没有，我如何区分浏览器以避免 doc.ready 和 pagshow 调用该函数两次？
@Mark_54 类似： if ("onpageshow" in window) { window.addEventListener("pageshow", [...], false); } else { window.addEventListener("load", [...], false); }
实际上，对于（较旧的）IE，您可能需要 window.attachEvent 而不是 addEventListener。做一些谷歌搜索，你会没事的（因为这是一个问题中的一个问题:)）

【解决方案2】：

这是众所周知的。 Safari 和许多其他浏览器会缓存页面，当您导航回该页面时，它们只会恢复之前的状态。

这是一篇关于这个主题的优秀 MDN 文章（它是关于 FF 1.5，但也应该适用于其他浏览器）：https://developer.mozilla.org/En/Using_Firefox_1.5_caching

尝试@zvona 建议的pageshow 事件。

【讨论】：

您好 Jan，我在 Safari 和 FF 中触发了 pageshow，但在 IE 中没有触发。你知道它是否也应该在那里工作吗？如果没有，我如何区分浏览器以避免 doc.ready 和 pagshow 调用该函数两次？

【解决方案3】：

如果没有触发onload事件，你应该设置缓存控制。

<head>
<meta charset="utf-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">

或在正文中添加标签：

<iframe style=”height:0px;width:0px;visibility:hidden” src=”about:blank”>
this frame prevents back forward cache
</iframe>

【讨论】：

【解决方案4】：

这是唯一对我有用的东西：

http://jkoder.com/prevent-safariany-browser-loading-from-cache-when-back-button-is-clicked/

window.onpageshow = function(event) {
  if (event.persisted) {
      window.location.reload(); 
  }
};

【讨论】：

【解决方案5】：

除了使用<body> 标记的onload 属性，您还可以尝试在jQuery 中使用DOM 就绪事件，如下所示：

$(document).ready(function() {
    // your code here
});

或者，简写版本：

$(function() {
    // your code here
});

即使这不能解决您使用 Safari 的问题，它仍然是一个很好的做法，因为它将您的 HTML 和 Javascript 分成易于识别的部分。

【讨论】：

嗨，安东尼。我刚刚尝试过，但它也只在 FF 和 IE 中触发。