点击后退按钮时，Safari 加载旧的 youtube 视频时遇到问题。我曾尝试将 onunload=""（此处提到 Preventing cache on back-button in Safari 5）添加到正文标签，但在这种情况下不起作用。
有什么方法可以防止从某个页面的缓存中加载 Safari 浏览器？
【问题讨论】：
标签： javascript caching safari back-button
您可以使用锚点，并查看文档位置 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>
这是未经测试的，但它应该可以通过最少的调整来工作。
【讨论】：
您的问题是由back-forward cache 引起的。当用户导航离开时，它应该保存页面的完整状态。当用户使用返回按钮导航返回时，页面可以非常快速地从缓存中加载。这与只缓存 HTML 代码的普通缓存不同。
当 bfcache 加载页面时，onload 事件不会被触发。相反，您可以检查onpageshow 事件的persisted 属性。它在初始页面加载时设置为 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()
}
});
【讨论】：
window.location = window.location 而不是 window.location.reload()，因为我认为这些原因已经被时间的迷雾迷失了。
该行为与 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>
（之前接受的答案似乎也有效，只是想插入文档和另一个潜在的修复）
【讨论】：
首先在代码中插入字段：
<input id="reloadValue" type="hidden" name="reloadValue" value="" />
然后运行 jQuery：
jQuery(document).ready(function()
{
var d = new Date();
d = d.getTime();
if (jQuery('#reloadValue').val().length == 0)
{
jQuery('#reloadValue').val(d);
jQuery('body').show();
}
else
{
jQuery('#reloadValue').val('');
location.reload();
}
});
【讨论】：
是的，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
});
【讨论】：
所有这些答案都有点老套。在现代浏览器 (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'
【讨论】：
有很多方法可以禁用 bfcache。最简单的方法是设置一个“卸载”处理程序。我认为让'unload'和'beforeunload'处理程序禁用bfcache是一个巨大的错误，但这就是他们所做的（如果你想让这些处理程序之一并且仍然使bfcache工作，您可以在 beforeunload 处理程序中删除 beforeunload 处理程序）。
window.addEventListener('unload', function() {})
在这里阅读更多：
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
【讨论】：
我在使用 3 个不同的锚链接到下一页时遇到了同样的问题。当从下一页返回并选择不同的锚点时，链接没有改变。
原来如此
<a href="https://www.example.com/page-name/#house=house1">House 1</a>
<a href="https://www.example.com/page-name/#house=house2">View House 2</a>
<a href="https://www.example.com/page-name/#house=house3">View House 3</a>
改为
<a href="/page-name#house=house1">House 1</a>
<a href="/page-name#house=house2">View House 2</a>
<a href="/page-name#house=house3">View House 3</a>
也用于安全：
// Javascript
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload()
}
};
// JQuery
$(window).bind("pageshow", function(event) {
if (event.originalEvent.persisted) {
window.location.reload()
}
});
在网上找到的卸载、重新加载和重新加载(true) 的解决方案都不起作用。希望这对有同样情况的人有所帮助。
【讨论】：