如何知道浏览器在javascript中最小化答案

【问题标题】：How to know a browser is minimized in javascript如何知道浏览器在javascript中最小化
【发布时间】：2012-03-17 08:04:24
【问题描述】：

您好，我收到通知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 会在某个时间间隔内显示。
在这里我需要当用户最小化浏览器时，他会通过闪烁浏览器和更改浏览器颜色来通知他

但首先我如何知道浏览器是否在 javasript 中被最小化这里我使用 jquery 来显示 div 标签

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

【问题讨论】：

How to tell if browser/tab is active的可能重复

标签： javascript jquery asp.net

【解决方案1】：

无法通过 JavaScript 判断页面是否最小化，但可以使用Visibility API 来判断页面是否可见 em> 是否给用户。

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

我们会耐心等待，但 visibilityState 即将到来： W3C defines the visibility state

【讨论】：

【解决方案5】：

Page Visibility API 提供了可让您了解文档何时可见或隐藏的事件，以及查看页面当前可见性状态的功能。

注意事项：Page Visibility API 对于保存特别有用资源并通过让页面避免执行来提高性能当文档不可见时不必要的任务。

当用户最小化窗口或切换到另一个选项卡时，API 会发送一个visibilitychange 事件，让侦听器知道页面状态已更改。您可以检测事件并执行一些操作或表现不同。例如，如果您的 Web 应用正在播放视频，它可以在用户将选项卡置于后台时暂停视频，并在用户返回选项卡时恢复播放。用户不会在视频中失去位置，视频的配乐不会干扰新前景选项卡中的音频，同时用户也不会错过任何视频。

用例

让我们考虑几个 Page Visibility API 的用例。

网站的图片轮播不应进入下一张幻灯片，除非用户正在查看该页面
显示信息仪表板的应用程序不想在页面不可见时轮询服务器以获取更新
页面想要检测它何时被预呈现，以便准确计算页面浏览量
网站想要在设备处于待机模式时关闭声音（用户按下电源按钮关闭屏幕）

开发人员历来使用不完善的代理来检测这一点。例如，观察窗口上的模糊和焦点事件可以帮助您知道您的页面何时不是活动页面，但它不会告诉您您的页面实际上对用户隐藏。 Page Visibility API 解决了这个问题。

示例

查看live example（有声视频）。

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

// 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: Page Visibility API

【讨论】：