js判斷iframe內(nèi)的網(wǎng)頁是否滾動(dòng)到底部觸發(fā)事件
更新時(shí)間：2014年03月18日 10:51:11 作者：
這篇文章主要介紹了js判斷iframe內(nèi)的網(wǎng)頁是否滾動(dòng)到底部觸發(fā)事件,需要的朋友可以參考下
之前有個(gè)需求是要判斷iframe內(nèi)的網(wǎng)頁是否滾動(dòng)到底部觸發(fā)事件, 網(wǎng)上找了許多資料都是說在當(dāng)前頁面下的, 索性就自己研究了一下, 找到了解決方法.
clientHeight：這個(gè)元素的高度，占用整個(gè)空間的高度
offsetHeight：是指元素內(nèi)容的高度
scrollTop：可以理解為滾動(dòng)條可以滾動(dòng)的長(zhǎng)度
以下是源代碼
<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有兼容問題，F(xiàn)F和IE10無問題，網(wǎng)上說chrome訪問iframe要在服務(wù)器環(huán)境下，不知道什么情況-->
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>
clientHeight：這個(gè)元素的高度，占用整個(gè)空間的高度
offsetHeight：是指元素內(nèi)容的高度
scrollTop：可以理解為滾動(dòng)條可以滾動(dòng)的長(zhǎng)度
以下是源代碼
復(fù)制代碼 代碼如下:
<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有兼容問題，F(xiàn)F和IE10無問題，網(wǎng)上說chrome訪問iframe要在服務(wù)器環(huán)境下，不知道什么情況-->
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>
您可能感興趣的文章:
- JS觸摸屏網(wǎng)頁版仿app彈窗型滾動(dòng)列表選擇器/日期選擇器
- 關(guān)于網(wǎng)頁中的無縫滾動(dòng)的js代碼
- JS實(shí)現(xiàn)網(wǎng)頁上隨滾動(dòng)條滾動(dòng)的層效果代碼
- js網(wǎng)頁滾動(dòng)條滾動(dòng)事件實(shí)例分析
- JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法
- JS實(shí)現(xiàn)網(wǎng)頁滾動(dòng)條感應(yīng)鼠標(biāo)變色的方法
- 實(shí)現(xiàn)網(wǎng)頁內(nèi)容水平或垂直滾動(dòng)的Javascript代碼
- js網(wǎng)頁側(cè)邊隨頁面滾動(dòng)廣告效果實(shí)現(xiàn)
- JavaScript實(shí)現(xiàn)瀏覽器網(wǎng)頁自動(dòng)滾動(dòng)并點(diǎn)擊的示例代碼
相關(guān)文章
layui實(shí)現(xiàn)圖片虛擬路徑上傳,預(yù)覽和刪除的例子
今天小編就為大家分享一篇layui實(shí)現(xiàn)圖片虛擬路徑上傳,預(yù)覽和刪除的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
隨機(jī)顏色如何獲取，在本文將為大家介紹下如何使用js來獲取，感興趣的朋友可以參考下2013-09-09
D3.js實(shí)現(xiàn)雷達(dá)圖的方法詳解
大家應(yīng)該都知道基本圖表一共有六種，分別是柱狀圖、折線圖、散點(diǎn)圖、氣泡圖、餅圖和雷達(dá)圖。前面五種圖形都已經(jīng)介紹過如何實(shí)現(xiàn)了，今天我們一起來看看最后的雷達(dá)圖。有需要的朋友們可以參考學(xué)習(xí)下。2016-09-09
JavaScript實(shí)現(xiàn)統(tǒng)計(jì)文本框Textarea字?jǐn)?shù)增強(qiáng)用戶體驗(yàn)
現(xiàn)在流行的Twitter等微博客網(wǎng)站，有一個(gè)很好的用戶體驗(yàn)，就是在文本框中輸入文字的時(shí)候，會(huì)自動(dòng)統(tǒng)計(jì)輸入的字符，并顯示用戶還能輸入的字符，在限制了140個(gè)字的微博客中，這樣的小提示可以很好的增強(qiáng)用戶體驗(yàn),本文也嘗試著實(shí)現(xiàn)一下2012-12-12
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)圖片輪播代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
js幾個(gè)不錯(cuò)的函數(shù) $$()...2006-10-10
將HTML自動(dòng)轉(zhuǎn)為JS代碼...2006-07-07
這篇文章主要給大家介紹了關(guān)于Webpack按需加載打包c(diǎn)hunk命名的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Webpack具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JS實(shí)現(xiàn)websocket長(zhǎng)輪詢實(shí)時(shí)消息提示的效果
這篇文章主要介紹了JS實(shí)現(xiàn)websocket長(zhǎng)輪詢實(shí)時(shí)消息提示的效果的相關(guān)資料,需要的朋友可以參考下2017-10-10
常見的瀏覽器存儲(chǔ)方式（cookie、localStorage、sessionStorage）
今天我們從前端的角度了解一下瀏覽器存儲(chǔ)，我們常見且常用的存儲(chǔ)方式主要由兩種：cookie、webStorage（localStorage和sessionStorage）。本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2019-05-05