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

Richard_Gao 发布于2019-08-01 18:19 / 1360人阅读

摘要：过早的发送数据可能导致错过收集数据的机会。因为用户代理通常会忽略在卸载事件处理器中产生的异步。使用方法，将会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。

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);
}

GPU云服务器云服务器常用的域名后缀及含义 jquery常用的方法常用的数据统计方法常用的数据挖掘方法

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/51656.html

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

摘要：过早的发送数据可能导致错过收集数据的机会。因为用户代理通常会忽略在卸载事件处理器中产生的异步。使用方法，将会使用户代理在有机会时异步地向服务器发送数据，同时不会延迟页面的卸载或影响下一导航的载入性能。 1 visibilitychange事件触发条件：浏览器标签页被隐藏或显示的时候会触发visibilitychange事件. 使用场景：当标签页显示或者隐藏时，触发一些业务逻辑 do...

gaara 2019-08-21 18:30 评论0 收藏0
如何给列表降维？sum()函数的妙用

摘要：上个月，学习群里的同学问了个题目，大意可理解为列表降维，例子如下想得到结果原始数据是一个二维列表，目的是获取该列表中所有元素的具体值。不经意间，函数的注意事项，竟把其它的进阶内容都联系起来了。小小的函数，竟成为学习之路上的一个枢纽。上个月，学习群里的 S 同学问了个题目，大意可理解为列表降维，例子如下： oldlist = [[1, 2, 3], [4, 5]] # 想得到结果：...

Channe 2019-07-31 10:19 评论0 收藏0
计算机视觉中的深度学习：技术、市场和5个你想不到的未来

摘要：接下来，介绍了使用深度学习的计算机视觉系统在农业零售业服装量身定制广告制造等产业中的应用和趋势，以及在这些产业中值得关注的企业。嵌入式视觉联盟主编Brian Dipert今天发布博文，介绍了2016年嵌入式视觉峰会（Embedded Vision Summit）中有关深度学习的内容：谷歌工程师Pete Warden介绍如何利用TensorFlow框架，开发为Google Translate...

baukh789 2019-04-25 18:03 评论0 收藏0