页面可见性api_页面可见性API

页面可见性api

One event that's always been lacking within the document is a signal for when the user is looking at a given tab, or another tab. When does the user switch off our site to look at something else? When do they come back? The Page Visibility API allows developers to react to changes in page visibility via the visibilitychange document event. New document.hidden and document.visibilityChange properties are also available.

文档中始终缺少的一个事件是用户正在查看给定的选项卡或另一个选项卡时发出的信号。 用户什么时候关闭我们的网站以查看其他内容？ 他们什么时候回来？ 通过页面可见性API，开发人员可以通过visibilitychange document更改visibilitychange document事件对页面可见性的变化做出React。 新的document.hidden和document.visibilityChange属性也可用。

View Demo 观看演示

隐藏文件 (document.hidden)

This new document property, document.hidden, returns true the page is currently not visible.

此新文档属性document.hidden返回true，该页面当前不可见。

document.visibilityState (document.visibilityState)

The visibilityState will either be visible (the page is the foreground tab of a non-minimized window), hidden (document is either a background tab or part of a minimized window), or prerender (the page content is being prerendered and is not visible to the user).

visibilityState将是visible (页面是未最小化窗口的前景选项卡)， hidden (文档是背景选项卡或最小化窗口的一部分)或prerender (页面内容正在预渲染且不可见)给用户)。

能见度变化事件 (visibilitychange Event)

Listening for changes in window visibility is as easy as:

侦听窗口可见性的更改非常简单：

// Adapted slightly from Sam Dutton
// Set name of hidden property and visibility change event
// since some browsers only offer vendor-prefixed support
var hidden, state, visibilityChange; 
if (typeof document.hidden !== "undefined") {
	hidden = "hidden";
	visibilityChange = "visibilitychange";
	state = "visibilityState";
} else if (typeof document.mozHidden !== "undefined") {
	hidden = "mozHidden";
	visibilityChange = "mozvisibilitychange";
	state = "mozVisibilityState";
} else if (typeof document.msHidden !== "undefined") {
	hidden = "msHidden";
	visibilityChange = "msvisibilitychange";
	state = "msVisibilityState";
} else if (typeof document.webkitHidden !== "undefined") {
	hidden = "webkitHidden";
	visibilityChange = "webkitvisibilitychange";
	state = "webkitVisibilityState";
}

// Add a listener that constantly changes the title
document.addEventListener(visibilityChange, function() {
	document.title = document[state];
}, false);

// Set the initial value
document.title = document[state];

The example above changes the document.title property during every visibility change!

上面的示例在每次可见性更改期间都更改了document.title属性！

支持visibilityChange MooTools中的更改 (Supporting visibilityChange in MooTools)

MooTools doesn't support visibilityChange out of the box, so you'll need to add this bit of JavaScript:

MooTools不支持visibilityChange更改，因此，您需要添加以下JavaScript：

// Set it up!
Element.NativeEvents[visibilityChange] = 2;
Element.Events[visibilityChange] = {
	base: visibilityChange,
	condition: function(event) {
		event[state] = document[state];
		event.visibilityState = document[state];
		return true;
	}
};

// Now use it!
document.addEvent(visibilityChange, function(e) {
	document.title = document[state];
});

Don't you love it when it's that easy?! This mirror the code needed to add onMessage events to the list of supported events.

这么简单，您不喜欢它吗？ 这镜像了将onMessage事件添加到受支持事件列表所需的代码。

View Demo 观看演示

So what could visibilitychange be used for? You could stop periodically refreshing content when the page is no longer visible, then pull new content when the page becomes visible again. You could pause and resume a video during visibility changes. Audio too. You could adjust your site statistics to count only time spent on site while the page is visible. There's loads you can do! So...the question is...what would you do with this?

那么visibilitychange可以用于什么呢？ 当页面不再可见时，您可以停止定期刷新内容，然后在页面再次变得可见时拉出新内容。 在可见性更改期间，您可以暂停和恢复视频 。 音频也一样。 您可以调整网站统计信息，以仅计算页面可见时在网站上花费的时间。 您可以做很多事情！ 所以...问题是...您将如何处理？

翻译自: https://davidwalsh.name/page-visibility

页面可见性api