js判断iframe内的网页是否滚动到底部触发事件

JavaScript019

js判断iframe内的网页是否滚动到底部触发事件,第1张

这篇文章主要介绍了js判断iframe内的网页是否滚动到底部触发事件,需要的朋友可以参考下

之前有个需求是要判断iframe内的网页是否滚动到底部触发事件,

网上找了许多资料都是说在当前页面下的,

索性就自己研究了一下,

找到了解决方法.

clientHeight:这个元素的高度,占用整个空间的高度

offsetHeight:是指元素内容的高度

scrollTop:可以理解为滚动条可以滚动的长度

以下是源代码

代码如下:

<iframe

src="~/Files/3.html"

id="iframepage"

width="825"

onload="func()"></iframe>

<script

type="text/javascript">

function

func()

{

var

ifm

=

document.getElementById("iframepage")

ifm.height

=

window.document.body.clientHeight

-

100

}

<!--在chrome有兼容问题,FF和IE10无问题,网上说chrome访问iframe要在服务器环境下,不知道什么情况-->

window.document.getElementById("iframepage").contentWindow.onscroll

=

function

aaa()

{

var

ifm

=

document.getElementById("iframepage").contentWindow.document.documentElement

if

(ifm.scrollTop

==

ifm.scrollHeight

-

ifm.clientHeight)

{

alert("到底了")

}

}

</script>

if (dom.offsetTop >0 || dom.scrollHeight >dom.offsetHeight)

{

//滚动条已出现

}

只能判断是否存在滚动条

<body>标签只有onload\onunload\onbeforeunload事件,而没有onclose事件。不管页面是关闭还是刷新都会执行onunload事件。如何捕捉到页面关闭呢?

页面加载时只执行onload

页面关闭时只执行onunload

页面刷新时先执行onbeforeunload,然后onunload,最后onload。这样我们可以在onbeforeunload中加一个标记,在onunload中判断该标记,即可达到判断页面是否真的关闭了。

<html>

<head>

<title>判断页面是关闭还是刷新</title>

</head>

<body onunload="fclose()" onload="fload()" onbeforeunload="bfunload()">

<script language="javascript">

var s = "test"

function fclose()

{

if(s=="no")

alert(’unload me!=’+s+’这是刷新页面!’)

else

alert(’这是关闭页面’)

}

function fload()

{

alert("load me!="+s)

}

function bfunload()

{

s = "no"

}

</script>

</body>

</html>