资讯专栏INFORMATION COLUMN

有趣的浏览器活跃窗口监听

wuaiqiu / 2063人阅读

摘要:有趣的浏览器活跃窗口监听在浏览器中,有这样两个事件监听,分别表示的是窗口失去焦点和窗口处于活跃状态,什么意思呢即在你浏览其他窗口页面或是浏览器最小化又或是点击了其他程序等等,都算是浏览器窗口失去焦点,那么事件就会触发。

2016-04-11

有趣的浏览器活跃窗口监听 window.onblur & window.onfocus

在浏览器中,有这样两个事件监听 window.onblur & window.onfocus
分别表示的是窗口失去焦点和窗口处于活跃状态,什么意思呢?

即在你浏览其他窗口页面、或是浏览器最小化、又或是点击了其他程序等等,都算是浏览器窗口失去焦点,那么 window.onblur 事件就会触发。
同样的,当你回到该窗口浏览网页,该窗口就处于活跃状态,相应的 window.onfocus 事件也会触发。

那么我们可以利用这两个事件做哪些有趣的东西呢?

让网页标题变得有趣

首先来我的博客感受一下吧,地址:安生博客,
打开网页之后,点击其他窗口,然后再次回到安生博客,期间请注意网页标题的变化,是不是很好玩。
没错,玩的就是心机,让你不看我的博客哈哈。

代码实现

代码非常地简单,以致于你不得不感叹世界真的很奇妙。
接下来将是一段愉悦的时光,因为马上我就要把我的全世界摆在你的面前了。

(function () {
  var title = document.title
  window.onblur = function () {
    document.title = "网页崩溃了,快看!"
  }

  window.onfocus = function () {
    document.title = title
  }
})()

将以上代码放在你的html文件中即可。

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

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

相关文章

  • 【前端词典】分享 8 个有趣且实用 API

    摘要:使用上面的截图是微信网页版的消息提示。代码很简单微信网页版微信网页版微信全屏定义这个可以使你所打开的页面全屏展示,没有其他页面外的内容展示在屏幕上。如果你想加群交流,你也可以添加我的微信。前言 在日常开发中总是和各种 API 打交道,我们名为前端工程师实为 API 调用工程师。这篇文章我就分享 8 个有趣的 API,你若通过阅读这篇文章对前端增加一点点的乐趣,对我来说也是一种鼓励。 这几...

    baiy 评论0 收藏0
  • 【前端词典】分享 8 个有趣且实用 API

    摘要:前言在日常开发中总是和各种打交道,我们名为前端工程师实为调用工程师。使用上面的截图是微信网页版的消息提示。代码很简单微信网页版微信网页版微信全屏定义这个可以使你所打开的页面全屏展示,没有其他页面外的内容展示在屏幕上。 前言 在日常开发中总是和各种 API 打交道,我们名为前端工程师实为 API 调用工程师。这篇文章我就分享 8 个有趣的 API,你若通过阅读这篇文章对前端增加一点点的乐...

    duan199226 评论0 收藏0
  • 【前端词典】分享 8 个有趣且实用 API

    摘要:前言在日常开发中总是和各种打交道,我们名为前端工程师实为调用工程师。使用上面的截图是微信网页版的消息提示。代码很简单微信网页版微信网页版微信全屏定义这个可以使你所打开的页面全屏展示,没有其他页面外的内容展示在屏幕上。 前言 在日常开发中总是和各种 API 打交道,我们名为前端工程师实为 API 调用工程师。这篇文章我就分享 8 个有趣的 API,你若通过阅读这篇文章对前端增加一点点的乐...

    Enlightenment 评论0 收藏0
  • 独立开发变现周刊(第26期):短链览器插件,从1个想法到35万活跃用户

    摘要:在我的案例中,我看到谷歌正在扼杀他们的短链接服务,而最流行的缩短器扩展是使用谷歌的缩短器,并且有超过万用户。 Csaba经验分享 2、Http Server Online:网页版HTTP服务 今天看到一个思路很奇特的开源小项目,网页版实现加载http服务。一般我们会启动一个http server来实现http的项目启动加载,有Node.js、Java、Python等等。通过...

    rainyang 评论0 收藏0
  • 一些有趣web 标签属性/API

    摘要:内容安全策略描述相当于的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为,中的内容其实就是各个参数的变量值。可以通过属性取得。 标签 Img标签 属性 crossorigin 值: anonymous use-credentials 应用场景 crossorigin: 这个枚举属性表明是否必须使用 CORS 完成相关图像的抓取, HTM...

    468122151 评论0 收藏0

发表评论

0条评论

wuaiqiu

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<