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

综合技术 2017-12-30

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.sendBeacon

这个方法主要用于满足 统计和诊断代码 的需要,这些代码通常尝试在卸载(unload)文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而, 对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在卸载事件处理器中产生的异步 XMLHttpRequest 。

使用 sendBeacon() 方法,将会使用户代理在有机会时异步地向服务器发送数据,同时不会延迟页面的卸载或影响下一导航的载入性能。这就解决了提交分析数据时的所有的问题:使它可靠,异步并且不会影响下一页面的加载。此外,代码实际上还要比其他技术简单!

注意:该方法在IE和safari没有实现

使用场景: 发送崩溃报告

window.addEventListener('unload', logData, false);

function logData() {
    navigator.sendBeacon("/log", analyticsData);
}

您可能感兴趣的

EOS节点投票暴露巨大私钥安全隐患,超百万EOS已被盗... http://www.8btc.com/eoss-experimental-launch-might-putting-investor-money-risk#comment 1558 你会信任让谁知道自己的私钥? 这个问题可能正是EOS代币持有者所关注的,持有者被激励去帮助这个期待...
Jacobo Aragunde: Browsers in the 16th GENIVI AMM I’m currently in Birmingham, ready to attend the 16th GENIVI All-members meeting! We will be showcasing the work we have been doing lately to integr...
Everything You Need to Know About the Plan to Kill... Your browser does not support HTML5 video tag. Click here to view original GI...
Will the new Bitmain Antminer E3 make you hit the ... Not too long ago, Howtotoken started the 10KQA Challenge (details about ithere) and the core idea was simple: build a moderated list of 10,000 questi...
How to Mute Sites With Autoplaying Videos Browsers have made it easy tomute sites How to Mute Tabs With One Click in Google Chrome How to Mute Tabs With One Click in Google Chrome Fig...