如何在JavaScript中判断浏览器是否最小化

Question

你好，我有一个包含一些信息和计时器的通知 div(divNotify) 在主页面中。

   Protected Sub Timer_Tick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Timer1.Tick
       Try
           Me.GetNotification_Stats()

           ScriptManager.RegisterClientScriptBlock(Me.Page, GetType(String), "Alert", "Show_NotifyDiv();", True)

       Catch ex As Exception
           Me.lblError.Visible = True
           Me.lblError.InnerText = ex.Message
       End Try
   End Sub

divNotify

会在一定时间间隔内显示。
我需要实现当用户最小化浏览器时，通过闪烁和更改浏览器颜色来通知用户。
但首先，我该如何在JavaScript中判断浏览器是否被最小化？我正在使用jQuery来显示

标签。

  function Show_NotifyDiv() {              
            $("#div_NotificationOuter").show(1000);
            $("#div_NotificationOuter").animate({ bottom: '+=30px' }, 4000);
    }

- adilahmed

---

可能是重复的问题：如何判断浏览器/选项卡是否处于活动状态 - Jack

Answer 1

无法通过JavaScript判断页面是否被最小化，但是可以使用Visibility API来确定页面是否对用户可见。

目前在Chrome、Mozilla和IE10中可用。

• https://developer.mozilla.org/en/DOM/Using_the_Page_Visibility_API
• http://code.google.com/chrome/whitepapers/pagevisibility.html
• http://www.nczonline.net/blog/2011/08/09/introduction-to-the-page-visibility-api/

- c69

Answer 2

页面可见性 API 提供了事件，可以监测文档何时变为可见或隐藏，并提供功能来查看页面的当前可见性状态。

备注：页面可见性 API 特别有用，可以通过让页面避免在文档不可见时执行不必要的任务来节省资源并提高性能。

当用户最小化窗口或切换到另一个标签页时，该 API 会发送 visibilitychange 事件以通知监听器页面的状态已更改。您可以检测该事件并执行一些操作或表现出不同的行为。例如，如果您的 Web 应用正在播放视频，则可以在用户将选项卡置于后台时暂停视频，并在用户返回选项卡时恢复播放。用户不会失去视频中的位置，视频的声音不会干扰新前景选项卡中的音频，同时用户也不会错过任何视频内容。 使用案例 让我们考虑一些页面可见性 API 的使用案例。

一个网站有一个图片轮播，除非用户正在查看页面，否则不应该向下一张幻灯片推进。 一个显示信息仪表板的应用程序不希望在页面不可见时轮询服务器以获取更新。 一个页面想要检测它是否正在被预渲染，以便它可以保持准确的页面视图计数。 一个网站想要在设备处于待机模式时关闭声音（用户按下电源按钮关掉屏幕）。

开发人员过去常常使用不完美的代理来检测这些。例如，通过监听窗口的模糊和聚焦事件可以知道你的页面不是活动页面，但它并不能告诉你你的页面实际上对用户是隐藏的。页面可见性 API 解决了这个问题。

示例：

请查看 实时示例（带有声音的视频）。

此示例会在您切换到另一个选项卡时暂停视频，并在您返回到其选项卡时重新播放，它是使用以下代码创建的：

// Set the name of the hidden property and the change event for visibility
var hidden, visibilityChange; 
if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support 
  hidden = "hidden";
  visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") {
  hidden = "msHidden";
  visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") {
  hidden = "webkitHidden";
  visibilityChange = "webkitvisibilitychange";
}
 
var videoElement = document.getElementById("videoElement");

// If the page is hidden, pause the video;
// if the page is shown, play the video
function handleVisibilityChange() {
  if (document[hidden]) {
    videoElement.pause();
  } else {
    videoElement.play();
  }
}

// Warn if the browser doesn't support addEventListener or the Page Visibility API
if (typeof document.addEventListener === "undefined" || hidden === undefined) {
  console.log("This demo requires a browser, such as Google Chrome or Firefox, that supports the Page Visibility API.");
} else {
  // Handle page visibility change   
  document.addEventListener(visibilityChange, handleVisibilityChange, false);
    
  // When the video pauses, set the title.
  // This shows the paused
  videoElement.addEventListener("pause", function(){
    document.title = 'Paused';
  }, false);
    
  // When the video plays, set the title.
  videoElement.addEventListener("play", function(){
    document.title = 'Playing'; 
  }, false);

}

来源：MDN：页面可见性 API

- Shivam Jha

Answer 3

此外，除了c69的回答之外，我建议使用isVisible库。 它具有实用函数来访问W3C页面可见性API，您不必担心跨浏览器支持（统一moz-或webkit前缀函数）。

- nasskalte.juni

Answer 4

我们会耐心等待，但是 visibilityState 即将到来： W3C 定义了可见性状态

- jMiguel LA

Answer 5

也许检查一下窗口的大小？我只是猜测。

- Vlad Balmos