通过js怎么让浏览器在最小化时强制弹出显示

JavaScript017

通过js怎么让浏览器在最小化时强制弹出显示,第1张

可以用js控制最小化的浏览器窗口桔黄闪动提示新信息,控制title文字就行。具体如下:

//取title

var title = document.getElementsByTagName('title')[0]

//需要修改的时候,直接给innerHTML复制

var title.innerHTML = '这里在闪'。

真的不行,换句话,没有办法的。

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8">

<title>无标题文档</title>

<script type="text/javascript">

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

alert(111)

}

function notifyTeacher(){

alert('document.body.offsetTop:'+document.body.offsetTop+',document.body.offsetWidth:'+document.body.offsetWidth+',screen.availWidth:'+screen.availWidth+',top.screenTop:'+top.screenTop)

alert('window.screen.width:'+window.screen.width+',window.screen.height:'+window.screen.height+',window.screen.availWidth:'+window.screen.availWidth+',window.screen.availHeight:'+window.screen.availHeight)

alert(top.name)

alert(top.screenTop+'|'+top.screenLeft)

if(isMinStatus()){

window.focus()

}else{

document.focus()

}

}

</script>

</head>

<body onLoad="notifyTeacher()">

</body>

</html>

javascript的setTimeout以及setInterval休眠问题。

前端码农们在做项目中时候,必定不可少的需要做到轮播效果。但是有些特殊的需求,比如:

需要做到第一个容器内容轮播滚动之后,第二个容器内部再轮播滚动,再第三个容器内容轮播滚动。

这时候我的一开始的思路是:每个容器都看成一个单独的轮播效果,既然是依次的滚动就设定滚动开始时间差,三个setTimeout()分别延迟差。

HTML 代码:

<div id="warp">

<div class="items">

<ul class="island s1">

<li>111</li>

<li>222</li>

<li>333</li>

</ul>

</div>

<div class="items">

<ul class="island s2">

<li>444</li>

<li>555</li>

<li>666</li>

</ul>

</div>

<div class="items">

<ul class="island s3">

<li>777</li>

<li>888</li>

<li>999</li>

<li>000</li>

</ul>

</div>

</div>

CSS 代码:

.items{height: 18pxoverflow: hiddenmargin-bottom: 10pxborder-bottom: 1px dashed #999}

JAVASCRIPT 代码:(基于jquery的实现)

var uls = $("#warp").find(".island"),

lh = uls.find('li').height(),

size = uls.size(),

Global=[]//全局变量

uls.each(function(i,el){

$(el).find('li').first().clone(true).appendTo($(el))

})

/*动画效果*/

function animates(i){

Global[i]==undefined&&(Global[i]=0)

Global[i]++

_els =uls.eq(i)

var len = _els.find('li').length

_els.animate({"marginTop":-Global[i]*lh+"px"},600,function(){

if(Global[i] == len-1){

Global[i]=0

_els.css({"margin-top":"0px"})

}

})

}

function interval(i){

setInterval(function(){

animates(i)

},5000)

}

for(var x=0x<sizex++){

(function(x){

setTimeout(function(){

interval(x)

},650+x*650)

})(x)

}

一开始的时候我发现都是OK的,但是当我切换到别的页面,或者暂时最小化的时候,轮播就变得杂乱无章。这个问题困扰我很久,到公司请教

大牛同事,他说可能是 setInterval休眠问题导致。

经过仔细的查阅资料以及实践,发现当页面最小化时候或者切换网页浏览其他网页等情况时, setInterval是会暂时进入“休眠”状态,但是并不是不执行程序,它会把需要执行的操作放在队列中 ,等到下次窗口一打开的一瞬间把队列里面的全部执行,由于程序处理太快我们大部分时候并没有注意到这个问题。但是你去看所有网站的轮播效果,

假设现在你轮播的是第四张大图,下次打开时候播放的可能是任意的。

再分析上面的程序:

我们让程序分别过650ms, 1300ms,1950ms执行如果窗口一直是这个是本窗口,也就是没有进行休眠。程序可以照常执行。

如果窗口最小化,程序进入休眠,会把队列中的操作在很快时间内一起执行,所以程序一下子就乱啦。

那如何解决这个问题呢?还是想了啦jquery的animate,如果在动画animate的回调中进行递归,进入下次的轮播。那不就完美解决!!

让我们来看程序:

JAVASCRIPT代码:

var uls = $("#warp").find(".island"),

lh = uls.find('li').height(),

size = uls.size(),

i = 0

uls.each(function(i,el){

$(el).find('li').first().clone(true).appendTo($(el))

})

function animates(i){

var ul = $('.items').eq(i).find('ul')

if(!ul){returnfalse}

var count = parseInt(ul.attr("count-role")||0)

count++

var len = ul.find('li').length

ul.animate({"marginTop":-count*lh+"px"},600,function(){

if(count == len-1){

count=0

ul.css({"margin-top":"0px"})

}

ul.attr("count-role",count)

animates(++i)

})

}

function interval(){

setInterval(function(){

animates(i)

},5000)

}

interval()

这样就完美解决了这个问题。

我猜想可能由于浏览器的特殊性,它的资源有限。所以采用这个策略,也是可以理解的。