检查页面是否重新加载或刷新在Javascript中
我想检查有人试图刷新页面。
例如,当我打开一个页面时,什么也没有发生,但当我刷新页面返回一个警报。
知道页面实际上被重新加载的更好的方法是用户是大多数新版本浏览器支持的导航器对象。 它使用HTML 5导航时间API。
//check for navigation time API support if (window.performance) { console.info("window.performance work's fine on this browser"); } if (performance.navigation.type == 1) { console.info( "This page is reloaded" ); } else { console.info( "This page is not reloaded"); }
第一步是检查sessionStorage
的一些预定义值,如果它存在alert用户:
if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');
第二步是将sessionStorage
设置为某个值(例如true
):
sessionStorage.setItem("is_reloaded", true);
会话值保持不变,直到页面关闭,所以只有页面重新加载到站点的新选项卡中才能工作。 你也可以用相同的方法来保持重新加载。
第一次有人访问该页面时存储cookie。 刷新时检查您的cookie是否存在,如果存在,则提示。
function checkFirstVisit() { if(document.cookie.indexOf('mycookie')==-1) { // cookie doesn't exist, create it now document.cookie = 'mycookie=1'; } else { // not first visit, so alert alert('You refreshed!'); } }
并在你的身体标签:
<body onload="checkFirstVisit()">
我在这里发现了一些信息Javascript检测页面刷新 。 他的第一个建议是使用隐藏的字段,这往往是通过页面刷新存储的。
function checkRefresh() { if( document.refreshForm.visited.value == "" ) { // This is a fresh page load document.refreshForm.visited.value = "1"; // You may want to add code here special for // fresh page loads } else { // This is a page refresh // Insert code here representing what to do on // a refresh } }
<html> <body onLoad="JavaScript:checkRefresh();"> <form name="refreshForm"> <input type="hidden" name="visited" value="" /> </form> </body> </html>
如果
event.currentTarget.performance.navigation.type
回报
0 =>用户刚输入一个Url
1 =>页面重新加载
2 =>后退按钮点击。
我在这里发现了一些信息Javascript检测页面刷新
function UnLoadWindow() { return 'We strongly recommends NOT closing this window yet.' } window.onbeforeunload = UnLoadWindow;
如果您还想检测用户是否单击浏览器右上角的X:
function handleWindowClose() { if((window.event.clientX<0) || (window.event.clientY<0)) { event.returnValue = "If you have made any changes to the fields without clicking the Save button, your changes will be lost."; } }