通过document.hidden属性,可判断页面是否可见。 如果不可见,则document.hidden为true.如果可见,则为false。
但是, 如果该页面只是被其它窗口挡住, 而非最小化该页面。则document.hidden仍然是false. 而不是不可见。
//visibilitychange事件,不同浏览器需要增加不同的前缀
function getHiddenProp()
{
var prefixes = ['webkit','moz','ms','o'];
// if 'hidden' is natively supported just return it
if ('hidden' in document) return 'hidden';
// otherwise loop over all the known prefixes until we find one
for (var i = 0; i < prefixes.length; i++)
{
if ((prefixes[i] + 'Hidden') in document)
return prefixes[i] + 'Hidden';
}
// otherwise it's not supported
return null;
}
使用visibilityState,获取元素可见状态,不同浏览器下,改属性需要增加不同的前缀。作用类似hidden。
//获取当前所在浏览器,给visibilityState增加前缀。
function getVisibilityState()
{
var prefixes = ['webkit', 'moz', 'ms', 'o'];
if ('visibilityState' in document) return 'visibilityState';
for (var i = 0; i < prefixes.length; i++)
{
if ((prefixes[i] + 'VisibilityState') in document)
return prefixes[i] + 'VisibilityState';
}
// otherwise it's not supported
return null;
}
//当前标签页的可见状态获取
function isHidden()
{
var prop = getHiddenProp();
if (!prop) return false;
return document[prop];
}
判断标签页显示隐藏的实例代码
var visProp = getHiddenProp();
//该浏览器是否支持获取标签页的状态
if (visProp)
{
//绑定标签页显示/隐藏状态变更事件
var evtname = visProp.replace(/[H|h]idden/, '') + 'visibilitychange';
document.addEventListener(evtname, function () {
console.log("浏览器tab" + JSON.stringify(isHidden()));
}, false);
}