单击后退按钮时，Safari 加载旧的 youtube 视频时遇到问题。我曾尝试将 onunload=""（在此处提到防止 Safari 5 中的后退按钮上的缓存）添加到 body 标记，但在这种情况下不起作用。
有什么方法可以防止从某个页面上的缓存加载 safari？
单击后退按钮时防止从缓存加载 safari
IT技术
javascript
caching
safari
back-button
2021-02-01 08:48:16
6个回答
您的问题是由back-forward cache引起的。当用户导航离开时，它应该保存页面的完整状态。当用户使用后退按钮向后导航时，可以非常快速地从缓存中加载页面。这与仅缓存 HTML 代码的普通缓存不同。
当页面加载时 bfcacheonload事件不会被触发。相反，您可以检查事件的persisted属性onpageshow。它在初始页面加载时设置为 false。当页面从 bfcache 加载时，它被设置为 true。
Kludgish 解决方案是在从 bfcache 加载页面时强制重新加载。
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
如果您使用 jQuery，请执行以下操作：
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
所有这些答案都有点小技巧。在现代浏览器 (safari) 中仅用于onpageshow解决方案工作，
window.onpageshow = function (event) {
if (event.persisted) {
window.location.reload();
}
};
但在慢速设备上，有时您会在重新加载之前看到前一秒的缓存视图。处理这个问题的正确方法是在服务器响应上正确设置 Cache-Control 到一个波纹管
'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'
是的，Safari 浏览器不像 Firefox 和 Chrome 那样处理后退/前进按钮缓存。特别是像 vimeo 或 youtube 视频这样的 iframe 几乎不会被缓存，尽管有一个新的 iframe.src。
我找到了三种方法来处理这个问题。选择最适合您的情况。在 Firefox 53 和 Safari 10.1 上测试的解决方案
1. 检测用户是否正在使用后退/前进按钮，然后重新加载整个页面或通过替换 src 仅重新加载缓存的 iframe
if (!!window.performance && window.performance.navigation.type === 2) {
// value 2 means "The page was accessed by navigating into the history"
console.log('Reloading');
//window.location.reload(); // reload whole page
$('iframe').attr('src', function (i, val) { return val; }); // reload only iframes
}
2. 如果页面被缓存，则重新加载整个页面
window.onpageshow = function (event) {
if (event.persisted) {
window.location.reload();
}
};
3.从历史记录中删除页面，以便用户无法通过后退/前进按钮再次访问该页面
$(function () {
//replace() does not keep the originating page in the session history,
document.location.replace("/Exercises#nocache"); // clear the last entry in the history and redirect to new url
});
可以使用anchor，查看文档位置href的值；
从 开始http://acme.co/，在该位置附加一些内容，例如 '#b';
所以，现在你的 URL 是http://acme.co/#b，当一个人点击后退按钮时，它返回到http://acme.co，间隔检查功能发现我们设置的哈希标签缺失，清除间隔，并加载附加时间戳的引用 URL到它。
有一些副作用，但我会让你自己弄清楚;)
<script>
document.location.hash = "#b";
var referrer = document.referrer;
// setup an interval to watch for the removal of the hash tag
var hashcheck = setInterval(function(){
if(document.location.hash!="#b") {
// clear the interval
clearInterval(hashCheck);
var ticks = new Date().getTime();
// load the referring page with a timestamp at the end to avoid caching
document.location.href.replace(referrer+'?'+ticks);
}
},100);
</script>
这是未经测试的，但它应该在最少的调整下工作。
该行为与 Safari 的后退/前进缓存有关。您可以在相关的 Apple 文档中了解它：http : //web.archive.org/web/20070612072521/http : //developer.apple.com/internet/safari/faq.html#anchor5
Apple 自己的修复建议是在您的页面上添加一个空的 iframe：
<iframe style="height:0px;width:0px;visibility:hidden" src="about:blank">
this frame prevents back forward cache
</iframe>
（之前接受的答案似乎也有效，只是想插入文档和另一个潜在的修复程序）