中午看视频时发现如果把浏览器最小化,视频就会自动停止播放。所以就想到了是否可以用JS代码来判断浏览器是否最小化呢?百度了一下,发现了如下两种JS判断浏览器是否最小化的方法。

JS判断浏览器是否最小方法的方法

方法1:

鼠标拖动浏览器的窗口,用JS resize 事件方法来判断窗口是否最小化!

下面的代码中,如果浏览器可视窗口的高度小于40则默认浏览器最小化。

示例代码:

//飞鸟慕鱼博客
$(window).resize(function(){
    if($(window).height() < 40){
        console.log('已最小化!');
    }
});

方法2:

下面这个JS判断浏览器是否最小的代码来自网络,没有测试,不保证可用性。

示例代码:
function isMinStatus() {            
    var isMin = false;            
    if(window.outerWidth != undefined) {                
        isMin = window.outerWidth <= 160 && window.outerHeight <= 27;            
    } else {                
        isMin = window.screenTop < -30000 && window.screenLeft < -30000;            
    }            
    return isMin;        
}

方法3:js判断浏览器是否最小化的代码

以下js判断浏览器是否最小化的方法在谷歌浏览器中测试成功,如果最小化则打印“hidden”,最大化则打印“visible”!

示例代码:

//飞鸟慕鱼博客
//IE
if(document.addEventListener){
    document.addEventListener('msvisibilitychange',function(){
        console.log(document.msVisibilityState);
    });
}
//FF
if(document.addEventListener){
    document.addEventListener('mozvisibilitychange',function(){
        console.log(document.mozVisibilityState);
    });
}
//chrome
if(document.addEventListener){
    document.addEventListener('webkitvisibilitychange',function(){
        console.log(document.webkitVisibilityState);
    });
}