请注意:我没有试图检测到单击了后退按钮。我不在乎。
我只是想知道他们的页面是加载在一个反向导航。如果用户单击后退按钮建议他们刷新,我希望在应用程序的一个位置向他们显示警告。
编辑:
1) 我确实想缓存我的页面。我们现在生活在一个移动的世界里。不缓存是一种糟糕的做法。
2) 我希望此功能与URL无关。解耦是一种很好的做法。
<script>
if (history.state !== null && +history.state < history.length)
{
alert("refresh needed");
history.replaceState(null, "", window.location.href);
}
else
{
history.replaceState(history.length, "", window.location.href);
}
</script>
第一次加载页面时,它将历史记录的当前长度(也是页面在历史记录中的位置)存储到历史记录本身中,而无需更改浏览器的位置或以其他方式修改历史记录。在重新访问时,它会检查该位置是否处于历史的末尾——如果不是,则有一些反向导航。然后它会发出警报并清除存储的位置。
优点:
刷新时不触发警报。
若以后在同一选项卡或不同选项卡中再次访问页面,则不会触发警报。
缺点:
无法区分正向导航和反向导航。也就是说,如果用户返回到比这个页面更远的地方,然后向前导航到它,它仍然会发出警报,因为有些向后导航是用来到达这里的。然而,我认为即使在这种情况下,您也希望用户刷新。
只发出一次警报。如果用户再次前进和后退,它将不会再次发出警报。由于已经通知了用户,所以这可能并不重要。
这里有一个简单的方法。不过,它会检测到页面是从前后导航加载的。
if(window.performance.navigation.type === 2) {
// the page was navigated to via the forward or back button
// refresh
}
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
@jQuery.PHP.Magento.com击败了我,但您可以使用localStorage
而无需跟踪特定的URL:
<script>
window.onbeforeunload = function()
{
localStorage.setItem("beenHere", true);
}
if (localStorage.getItem("beenHere"))
{
alert("Please refresh");
localStorage.removeItem("beenHere");
}
</script>
对于不同的页面,"beenHere"需要是不同的字符串,但可以是符号,而不是精确的URL。
编辑:等待,注意到一个问题:刷新时会发出警报。我得多想想。
使用以下内容:
仅在第二页使用:
localStorage.setItem("urlnow",document.URL);
在第一页检查
if(localStorage.getItem("urlnow") == Your_URL_OF_Next_Page)){
window.location.reload()
}
没有这样的方法来检查下一页url。你可以有document.referrer,这在你的情况下没有用,所以你需要硬编码下一页url,以检查是否设置了localstorage变量。意味着用户进入了该页面。您也可以根据自己的要求销毁本地存储。
编辑:更好的方式
在第二页使用:
$(document).ready(function(){
localStorage.setItem("nextPageHit",1));
})
在第一页
$(document).ready(function(){
if(localStorage.getItem("nextPageHit")){
window.location.reload();//Forcible reload.
localStorage.setItem("nextPageHit",0);
}
})
您需要告诉浏览器不要通过设置响应标头来保存此页面的缓存
使用RubyonRails:
response.headers['Cache-Control'] = 'no-cache, no-store, must-revalidate' # HTTP 1.1.
response.headers['Pragma'] = 'no-cache' # HTTP 1.0.
response.headers['Expires'] = '0' # Proxies.
最好不要缓存页面,这样用户就不需要刷新了。在中添加以下标记将禁用页面的缓存。
<meta http-equiv="Cache-Control" content="no-store" />