你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
ansenhuang

有趣的浏览器活跃窗口监听 4个回复 专栏 @ Javascript

ansenhuang 发布于 2 年前

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文件中即可。

  • 光明穿越黑暗

    哈哈,有意思

    #1
  • zhanghx

    也可以试试visibilitychange事件,通过document.hidden来判断页面是否可见。

    #2
  • tabooc

    o((⊙﹏⊙))o.

    #3
  • llqfront

    window.onfocus
    有bug , 点回来时 第一次需要 鼠标点一下网页 要不 回不来
    有意思的东东
    赞一个

    #4
登录后回复,如无账号,请使用邀请码注册