Aut*_*act 42 javascript safari
我为当地社区大学做一些小编程和网络工作.这项工作包括维护一个非常庞大且灵魂破坏的网站,其中包括VBScript,javascript,Dreamweaver产生的混乱和一系列附加组件,各种各样的conmen已经说服他们多年来购买.
几天前,我接到一个电话"网站正在锁定使用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对我来说有点新鲜.
Lee*_*ski 18
Stefan的iframe解决方案有效,但如果不够优雅,我发现以下JavaScript也解决了这个问题:
window.onunload = function(){};
也就是说,如果您的菜单是JavaScript,那么您可能更愿意使用JavaScript解决此问题.
卸载事件处理程序定义的想法来自这篇Firefox 1.5文章:https://developer.mozilla.org/en/Using_Firefox_1.5_caching.
这是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();
}
};
}
(来源)
我根据自己的需要对其进行了修改,但现在还可以.(如果你不修改它,刷新烦人的白色屏幕).
请不要遵循任何告诉您忽略缓存的建议.页面缓存有一个原因 - 改善用户体验.您使用的方法会使用户体验变得更糟,因此除非您讨厌您的用户,否则请不要这样做.
Safari(桌面和iOS)的正确解决方案是使用pageshow事件而不是onload事件(请参阅https://developer.mozilla.org/en-US/docs/Using_Firefox_1.5_caching以了解这些内容).
该pageshow事件将触发你所期望的,同时onload事件,火灾,但是当页面通过缓存提供它也会起作用.无论如何,这似乎是你想要的.
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>
更多细节