Javascript 单击“上一步”按钮时防止从缓存加载safari

单击“后退”按钮时safari加载旧youtube视频时出现问题。我已经尝试将onunload=“”（这里提到）添加到body标签，但在本例中无效

---

有没有办法防止safari从某个页面的缓存加载？

您可以使用锚，并查看文档位置href的值

从

http://acme.co/

，将某些内容附加到位置，如“#b”

那么，现在您的URL是

http://acme.co/#b

，当一个人点击后退按钮时，返回到

http://acme.co

，而interval check函数会发现缺少我们设置的哈希标记，清除间隔，并加载附加了时间戳的引用URL

有一些副作用，但我会让你去弄清楚；）

document.location.hash=“#b”；
var referer=document.referer；
//设置一个间隔以监视哈希标记的删除
var hashcheck=setInterval（函数（）{
if（document.location.hash！=“b”）{
//清除间隔
清除间隔（hashCheck）；
var ticks=new Date（）.getTime（）；
//在引用页面的末尾加载一个时间戳，以避免缓存
document.location.href.replace（referer+“？”+勾号）；
}
},100);

这是未经测试的，但应进行最少的调整。

您的问题是由以下原因造成的。它应该在用户离开时保存页面的完整状态。当用户使用后退按钮返回时，页面可以很快从缓存加载。这与只缓存HTML代码的普通缓存不同

为bfcache

onload加载页面时，不会触发事件。相反，您可以检查
onpageshow
事件的
persistend
属性。在初始页面加载时设置为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的后向/前向缓存有关。您可以在相关的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="" />

是的，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'，'no Cache，max age=0，必须重新验证，no store'
禁用bfcache的方法有很多。最简单的方法是设置“卸载”处理程序。我认为让“unload”和“beforeunload”处理程序禁用bfcache是一个巨大的错误，但这正是它们所做的（如果您希望使用其中一个处理程序并仍然使bfcache工作，可以在beforeunload处理程序中删除beforeunload处理程序）

window.addEventListener（'unload'，function（）{}）

请在此处阅读更多信息：

我在使用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>

在网上找到的卸载、重新加载和重新加载（true）的解决方案都不起作用。希望这能帮助有同样情况的人。
可能重复的@MikaTuupola答案应该被标记为正确答案。这是我在Safari上遇到的一个小问题，因为同样的BFCache行为：在我的情况下，当我不得不操作一些类时，我找到的最佳解决方案是：这是我迄今为止找到的唯一可行的解决方案，但它相当不完善，因为页面在重新加载之前仍会短暂显示，并且该解决方案很容易因禁用javascript而受阻。有人找到了更完整的解决方案吗？这在Android版Chrome上似乎不起作用（没有测试任何其他移动浏览器，因此限制了我的发言）。对于IE 11，我不得不使用
window.location=window.location
而不是
window.location.reload（）
，为了解决onpageshow istrigger之前页面可见性的问题，您可以使用onbeforeunload事件。在此事件期间，可以将主体的不透明度更改为0。所以是的，但页面将短暂可见，但不透明度为0。（window.onbeforeunload=（）=>{document.body.opacity=0；}）。这适用于Safari 11。不适用于Chrome（桌面），因为有一个有趣的bug，唯一仍然有效的解决方案得到了一个负的评级，但标题似乎有效，并且比JS解决方案好得多。我将此代码放在标题中，现在iPhone上的Safari在通过后退按钮返回此页面时执行JS和JQuery代码，谢谢！
window.onpageshow = function (event) {
    if (event.persisted) {
        window.location.reload();
    }
};

<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() 
    }
});