Safari 后退按钮问题

IT技术 javascript safari
2021-03-12 16:44:45

我为当地社区大学做一些小程序和网络工作。工作包括维护一个非常大的破坏灵魂的网站，该网站由一堆 VBScript、javascript、Dreamweaver 生成的 cruft 和一系列附加组件组成，多年来，各种骗子说服他们购买。

几天前，我接到一个电话“该网站正在为使用 Safari 的人锁定！” 好的，第一步下载Safari(v3.1.2)，第二步浏览网站。一切似乎都运行良好。

长话短说，我终于解决了这个问题，它与 Safari 的后退按钮有关。该网站使用花哨的 javascript 菜单，该菜单适用于我第一次尝试过的所有浏览器，包括 Safari。但是在 Safari 中，如果您点击页面上的链接，然后点击后退按钮，菜单将不再有效。

我做了一个精简的网页来说明原理。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Safari Back Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('Hello');">
<a href="http://www.codinghorror.com">Coding Horror</a>
</body>
</html>

加载页面，您会看到警报框。然后点击页面上的链接并点击后退按钮。在 IE 和 Firefox 中，您会再次看到警告框，而在 Safari 中则不会。

经过激烈的谷歌搜索，我发现其他人也有类似的问题，但没有真正令人满意的答案。所以我的问题是，在用户点击后退按钮后，如何让我的页面在 Safari 中以与在其他浏览器中相同的方式工作？

如果这是一个愚蠢的问题，请保持温和，javascript 对我来说有点陌生。

6个回答

Stefan 的 iframe 解决方案有效，但如果这还不够优雅，我发现以下 JavaScript 也可以解决它：

window.onunload = function(){};

也就是说，如果您的菜单是 JavaScript，那么您可能更喜欢用 JavaScript 来解决这个问题。

卸载事件处理程序定义的想法来自这篇 Firefox 1.5 文章：https : //developer.mozilla.org/en/Using_Firefox_1.5_caching。

即使我使用 jQuery 的 $(document).ready 事件，Safari 中的后退按钮也有问题。我添加了上面的代码，它解决了这个问题。
2021-04-24 16:44:45
@AralRoca 是的。查看bfcache（例如通过此博客文章）并在此处查看如何挂钩一些代码以整理先前的页面状态。
2021-04-25 16:44:45
@LeeKowalkowski操作系统确实有一种影响- Safari浏览器适用于iOS不工作，而OS X版本做的工作！
2021-04-27 16:44:45
似乎这个问答仍然相关。在考虑浏览器的怪癖时，人们倾向于只考虑 IE，但“其他人”（Webkit、Firefox）也有它们，尽管更小也更难以捉摸……
2021-05-02 16:44:45
@Mika Tuupola：Safari 不仅适用于 iOS。我看不出操作系统如何影响 Safari 的行为，您也必须拥有更新版本的 Safari。我没有任何 iOS 设备，所以耸耸肩。
2021-05-11 16:44:45

把这个放在 body 标签中 <body onunload="">

这将在您每次点击返回按钮时强制 safari、chrome、FF 重新加载

它通过 Safari 和 Firefox 测试解决了我在 Angular 项目上的问题，谢谢👍
2021-05-05 16:44:45

请不要遵循任何告诉您忽略缓存的建议。页面被缓存是有原因的——为了改善用户体验。您使用的方法会使用户体验变得更糟，所以除非您讨厌您的用户，否则不要这样做。

Safari（桌面和 iOS）的正确解决方案是使用pageshow事件而不是onload事件（有关这些内容，请参阅https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching）。

该pageshow事件将在您期望onload事件触发的同时触发，但当页面通过缓存提供时它也将起作用。无论如何，这似乎是您想要的。

@SergeyP.akaazure 这就是您使用该pagehide事件来停止微调器的原因。
2021-04-21 16:44:45
真的吗？如果 js 以某种方式修改了页面，例如在指示进程的按钮上指示一个微调器，然后加载新页面，那么在返回导航时，您将在按钮上看到这个微调器。这不是它应该的方式
2021-05-12 16:44:45

这是 Mobile Safari 的一个很好的解决方案：

/*! Reloads page on every visit */
function Reload() {
    try {
        var headElement = document.getElementsByTagName("head")[0];
        if (headElement && headElement.innerHTML)
            headElement.innerHTML += " ";
        } catch (e) {}
    }

    /*! Reloads on every visit in mobile safari */
    if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        window.onpageshow = function(evt) {
            if (evt.persisted) {
                document.body.style.display = "none";
                location.reload();
            }
        };
    }

（来源）

我根据我的需要修改了它，但它是可以的。（如果您不修改它，刷新时会出现烦人的白屏）。

孤立链接被认为是一个糟糕的答案，因为它本身是没有意义的，并且不能保证目标资源在未来仍然存在。请尝试至少包括您要链接到的信息摘要。
2021-04-30 16:44:45

一个 iframe 解决了这个问题：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head><title>Safari Back Button Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body onload="alert('Hello');">
<a href="http://www.codinghorror.com">Coding Horror</a>
<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this prevents back forward cache
</iframe>
</body>
</html>

更多详情

此答案中的链接现已断开；您可以在此处找到存档的详细信息。
2021-05-07 16:44:45
其它你可能感兴趣的问题
上一篇邮递员如何发送请求？ajax，同源策略 下一篇更改 iframe src 时如何设置自定义 http 标头？