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

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

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

Answer 1

无法通过JavaScript查看页面是否最小化，但您可以使用 Visibility API 来确定页面是否可见用户与否。

目前可在Chrome，Mozilla和IE10中使用。

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

页面可见性API 提供了一些事件，您可以观察这些事件以了解文档何时可见或隐藏，还提供了查看页面当前可见性状态的功能。

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

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

用例

让我们考虑页面可见性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

如何在javascript中最小化浏览器

5 个答案: