js或者jquery 能不能判断网页内容是否在当前窗口显示

JavaScript013

js或者jquery 能不能判断网页内容是否在当前窗口显示,第1张

可以的,步骤如下:

1、得到网页滚动条滚动高度和滚动宽度:$(window).scrollTop(), $(window).scrollLeft()

2、得到网页的宽高:$(window).width(),$(window).height()

3、计算当前网页显示区域的结算点:网页宽高分别加上滚动条滚动的宽高得到结束点

4、计算当前网页显示区域的起始点:就是网页滚动条的滚动值

5、得到指定dom的位置:$("#div").offset()得到dom的位置起始点

6、得到指定dom的宽高:$("#div").width(),$("#div").height()

7、然后判断指定dom的位置是否在网页的显示区域内

步骤是这样的,代码就不写了。。。

这样:

//网页当前状态判断var hidden, state, visibilityChangeif (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"}// 添加监听器,在title里显示状态变化

document.addEventListener(visibilityChange, function() {

document.title = document[state]}, false)//初始化页面状态document.title =

document[state]

扩展资料:

注意事项

浏览器对象有onfocus 和 onblur事件可以监听。但是触发这两个事件的前提是页面之前是focus过的。也就是说页面刚刚渲染完,用户在没有页面上任何操作时,页面是不会正常监听这两个事件的;或者页面在打开状态下,但是触发了onblur之后并无页面操作的情况下也不会正常监听这两个事件。

直到,用户操作页面触发focus,之后离开页面才会触发blur,再次点击到当前页面时才会触发focus,如此反复都会触发相应的事件。

触发onblur事件的情况:

1、在chrome浏览器下,点击console面板也会触发blur事件,同样的,前提是之前是focus的状态。

2、页面最小化。

3、浏览器切换tab页面。

4、页面中的任何弹窗。

5、focus状态下切换到其他应用。