单击后退按钮时阻止从缓存加载safari
Prevent safari loading from cache when back button is clicked
点击后退按钮时,safari加载旧的youtube视频时出现问题。我曾尝试将onunload="(此处提到Safari5中的"在后退按钮上防止缓存")添加到body标记中,但在这种情况下不起作用。
有没有什么方法可以防止safari从某个页面的缓存加载?
您的问题是由后向缓存引起的。它应该在用户离开时保存页面的完整状态。当用户使用后退按钮导航时,页面可以很快从缓存中加载。这与只缓存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()
}
});
所有这些答案都有点像黑客。在现代浏览器(safari)上只有onpageshow
解决方案工作,
window.onpageshow = function (event) {
if (event.persisted) {
window.location.reload();
}
};
但在速度较慢的设备上,有时您会在重新加载之前看到前一个缓存视图。处理这个问题的正确方法是在服务器上正确设置缓存控制以响应下面的
'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
});
您可以使用锚点,并查看文档位置的值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>
这是未经测试的,但它应该在最小的调整下工作。
我在使用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)的解决方案都不起作用。希望这能帮助到同样处境的人。
该行为与Safari的后退/前进缓存有关。您可以在相关的苹果文档中了解它:http://web.archive.org/web/20070612072521/http://developer.apple.com/internet/safari/faq.html#anchor5
苹果自己的修复建议是在你的页面上添加一个空的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();
}
});
有很多方法可以禁用bfcache。最简单的方法是设置一个"卸载"处理程序。我认为让'unload'和'beforeunload'处理程序禁用bfcache是一个巨大的错误,但他们就是这么做的(如果你想让和中的一个处理程序仍然使bfcache工作,你可以在beforenload处理程序中删除beforeunload处理程序)。
window.addEventListener('unload', function() {})
点击此处阅读更多:
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/1.5/Using_Firefox_1.5_caching
- 如何在从浏览缓存加载页面时执行javascript
- 使用jquery.load('pageName')方法时,未从应用程序缓存加载Html页
- ajax缓存false无法加载图像
- 是否可以在不将其添加到DOM的情况下预加载和缓存视频文件
- 使用HTML5缓存时无法加载外部资源
- 在正确的时间加载缓存的字体
- Kendo UI树视图中的延迟加载(带缓存)
- 如何强制从浏览器缓存重新加载当前页面
- 从缓存加载网页时未执行Javascript
- 如何在从缓存加载路由后强制服务工作者从网络请求路由
- 如何使用JQuery缓存加载的html
- Android Webview 从过期的缓存加载资源
- 停止从缓存加载Javascript和HTML
- 单击后退按钮时阻止从缓存加载safari
- 当未连接到服务器时,在Android webview中从应用缓存加载
- Javascript /识别从缓存加载
- 防止Knockout缓存加载的组件
- 使window.location.htm从服务器加载页面,而不是从浏览器缓存加载页面
- 如何不缓存加载器输出
- Safari/Webkit的后退按钮从缓存加载页面,而不是一个新的副本