单击后退button时防止从caching中加载Safari
点击后退button时,Safari浏览器加载旧的YouTubevideo时出现问题。 我已经尝试添加onunload =“”(这里提到防止在Safari 5中的后退button上的caching )的身体标记,但它不起作用在这种情况下。
有什么办法来防止从某个页面上的caching加载Safari?
您的问题是由后退caching引起的。 当用户导航时,应该保存完整的页面状态。 当用户导航返回button页面可以很快从caching加载。 这与仅cachingHTML代码的普通caching不同。
当页面加载bfcache onload
事件不会被触发。 相反,您可以检查onpageshow
事件的persisted
属性。 它在初始页面加载时设置为false。 当从bfcache加载页面时,它被设置为true。
Kludgish解决scheme是从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浏览器不像Firefox和Chrome那样处理后退/前进buttoncaching。 虽然有一个新的iframe.src,但是特别是像vimeo或youtubevideo这样的iframe几乎没有被caching。
我find了三种方法来处理这个问题。 select最适合您的情况。 在Firefox 53和Safari 10.1上testing的解决scheme
1.检测用户是否正在使用后退/前进button,然后重新加载整个页面或只重新加载caching的iframe,通过replacesrc
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.如果页面被caching,则重新载入整个页面
window.onpageshow = function (event) { if (event.persisted) { window.location.reload(); } };
3.从历史logging中删除页面,以便用户不能通过后退/前进button再次访问页面
$(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
解决scheme上工作,
window.onpageshow = function (event) { if (event.persisted) { window.location.reload(); } };
但是在缓慢的设备上,有时你会看到一秒钟之前的caching视图,然后重新加载。 处理这个问题的正确方法是正确设置服务器上的caching控制响应
'Cache-Control', 'no-cache, max-age=0, must-revalidate, no-store'
您可以使用锚点,并观察文档的位置值href;
从http://acme.co/
开始,追加一些东西到位置,如“#b”;
所以,现在你的URL是http://acme.co/#b
,当一个人点击后退button时,它返回到http://acme.co
,并且间隔检查函数看到缺lesshash标签设置,清除时间间隔,并加载引用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>
这是未经testing,但它应该与最小的调整工作。
该行为与Safari的Back / Forwardcaching相关。 您可以在相关的Apple文档中了解它: http : //web.archive.org/web/20070612072521/http : //developer.apple.com/internet/safari/faq.html#anchor5
苹果自己的修复build议是在你的页面上添加一个空的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(); } });