如何在使用浏览器后退按钮时强制重新加载页面?
我需要以某种方式检测用户是否已按下浏览器后退按钮并使用jquery重新加载页面并刷新(重新加载内容和CSS)。
如何通过jquery检测这样的动作?
因为如果我在浏览器中使用后退按钮,所以现在不会重新加载某些元素。 但是,如果我在网站中使用链接,则所有内容都会刷新并正确显示。
重要!
有些人可能误解了我想要的东西。 我不想刷新当前页面。 我想按下后退按钮后刷新加载的页面。 这是我更详细的意思:
- 用户正在访问page1。
- 而在第1页 – 他点击了第2页的链接。
- 他被重定向到page2
- 现在(重要的部分!)他点击浏览器中的后退按钮,因为他想回到page1
- 他回到了第1页 – 现在正在重新加载page1并且会收到一些警告,例如“你回来了!”
当浏览器通过历史遍历导航到您的页面时,您可以使用pageshow
事件来处理这种情况:
window.addEventListener( "pageshow", function ( event ) { var historyTraversal = event.persisted || ( typeof window.performance != "undefined" && window.performance.navigation.type === 2 ); if ( historyTraversal ) { // Handle page restore. window.location.reload(); } });
请注意,也可能涉及HTTP缓存。 您需要在服务器上设置与缓存相关的正确HTTP标头,以仅缓存那些需要缓存的资源。 您还可以强制重新加载以安装浏览器以忽略HTTP缓存: window.location.reload( true )
。 但我不认为这是最好的解决方案。
有关更多信息,请查看
- 在MDN上使用BFCache文章
- WebKit Page Cache II – Brady Eidson 的卸载活动
- MDN上的pageshow事件参考
- Ajax,后退按钮和DOM更新问题
- JavaScript – bfcache / pageshow事件 – event.persisted总是设置为false? 题
自发布以来已经有一段时间了,但如果您不需要支持旧版浏览器,我会找到更优雅的解决方案。
你可以检查一下
performance.navigation.type
包括浏览器支持的文档在此处: https : //developer.mozilla.org/en-US/docs/Web/API/Performance/navigation
因此,要查看页面是否已从历史记录中加载,您可以执行此操作
if(performance.navigation.type == 2){ location.reload(true); }
2
表示通过导航到历史记录来访问页面。 其他可能性是 –
0:
通过链接,书签,表单提交或脚本或通过在地址栏中键入URL来访问页面。
1:
通过单击“重新加载”按钮或通过Location.reload()方法访问该页面。
255:
任何其他方式
这些详细信息请访问: https : //developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
只需使用jquery:
jQuery( document ).ready(function( $ ) { //Use this inside your document ready jQuery $(window).on('popstate', function() { location.reload(true); }); });
当使用ajax单击后退或前进按钮时,上述操作将100%工作。
如果没有,则必须在脚本的不同部分进行错误配置。
例如,如果使用上一篇文章中的一个示例,则可能无法重新加载window.history.pushState('', null, './');
所以当你使用history.pushState();
确保你正确使用它。
建议大多数情况下你只需要:
history.pushState(url, '', url);
没有window.history …并确保定义了url 。
希望有所帮助..
您应该使用隐藏输入作为刷新指示器,值为“no”:
现在使用jQuery,您可以检查其值:
$(document).ready(function(e) { var $input = $('#refresh'); $input.val() == 'yes' ? location.reload(true) : $input.val('yes'); });
单击后退按钮时,隐藏字段中的值将保留与最初离开页面时相同的值。
因此,第一次加载页面时,输入的值将为“no”。 当您返回页面时,它将为“是”,您的JavaScript代码将触发刷新。
我找到了最好的答案,它对我来说非常合适
只需在链接中使用这个简单的脚本即可
next page
或按钮单击事件
当你使用它时,先刷新页面,然后转到下一页,当你返回时,它将具有最后刷新的状态。
我在CAS登录中使用过它并给了我想要的东西。 希望能帮助到你 …….
细节从这里找到
重新加载很容易。 你应该使用:
location.reload(true);
检测回来是:
window.history.pushState('', null, './'); $(window).on('popstate', function() { location.reload(true); });
最好的方法是使用jquery来设置超时。
function explode(){ alert("YOUR RELOAD PAGE HERE!"); } setTimeout(explode, 1);
在一毫秒内,它将触发一次该function,因此您的用户可能甚至不会注意到它触发。
我用它没问题。