不常用却很有妙用的事件及方法

1 visibilitychange事件 触发条件:浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. 使用场景:当标签页显示或者隐藏时,触发一些业务逻辑 document.addEventListener("visibilitychange", function() { console.log( document.visibilityState ); }); 2 storage事件 触发条件:使用localStorage or sessionStorage存储或者修改某个本地存储时 使用场景:标签页间通信 // AB页面同源 // 在A 页面 window.addEventListener('storage', (e) => {console.log(e)}) // 在B 页面,向120打个电话 localStorage.setItem('makeCall','120') // 然后可以在A页面间有输出, 可以看出A页面 收到了B页面的通知 ...key: "makeCall", oldValue: "119", newValue: "120", ... 3 beforeunload事件 触发条件:当页面的资源将要卸载(及刷新或者关闭标签页前). 当页面依然可见,并且该事件可以被取消只时 使用场景:关闭或者刷新页面时弹窗确认,关闭页面时向后端发送报告等 window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/"; e.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+ return confirmationMessage; // Gecko, WebKit, Chrome <34 }); 4 navigator....

2018-02-11 14:34:17 · 1 min · Eddie Wang