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)的長度
以下是源代碼
<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)的長度
以下是源代碼
復(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)文章
ES6不僅在語法上有很大的改進(jìn),在代碼的組織結(jié)構(gòu)上也有重大升級,下面這篇文章主要給大家介紹了關(guān)于ES6的一些實(shí)用高級技巧的相關(guān)資料,需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了echarts實(shí)現(xiàn)折線圖的拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-12-12
學(xué)習(xí)JavaScript設(shè)計(jì)模式(多態(tài))
這篇文章主要帶領(lǐng)大家學(xué)習(xí)JavaScript設(shè)計(jì)模式，其中重點(diǎn)介紹多態(tài)，舉例說明多態(tài)的思想，對多態(tài)進(jìn)行詳細(xì)剖析，感興趣的小伙伴們可以參考一下2015-11-11
JSON 數(shù)據(jù)詳解及實(shí)例代碼分析
這篇文章主要介紹了JSON 數(shù)據(jù)詳解及實(shí)例代碼分析的相關(guān)資料,需要的朋友可以參考下2017-01-01
跟我學(xué)習(xí)javascript的嚴(yán)格模式
跟我學(xué)習(xí)javascript的嚴(yán)格模式，對javascript嚴(yán)格模式進(jìn)行概述，進(jìn)入嚴(yán)格模式的方法，以及如何調(diào)用和相關(guān)語法，感興趣的小伙伴們可以參考一下2015-11-11
對數(shù)組中的項(xiàng)目進(jìn)行分組,你可能已經(jīng)做過很多次了,好消息是,JavaScript?現(xiàn)在有了分組方法,所以你再也不必這樣做了,下面我們就來看看它們的具體使用吧2024-02-02
JS將滑動(dòng)門改為選項(xiàng)卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法
這篇文章主要介紹了JS將滑動(dòng)門改為選項(xiàng)卡（需鼠標(biāo)點(diǎn)擊）的實(shí)現(xiàn)方法,涉及JavaScript頁面元素遍歷及樣式替換的相關(guān)技巧,再通過onmouseover與onclick即可分別實(shí)現(xiàn)滑動(dòng)門與選項(xiàng)卡兩種效果,需要的朋友可以參考下2015-09-09
Chrome擴(kuò)展頁面動(dòng)態(tài)綁定JS事件提示錯(cuò)誤
開發(fā)Chrome擴(kuò)展時(shí)，頁面的popup.html中需要js的時(shí)候，直接將JS寫在動(dòng)態(tài)綁定JS事件會提示錯(cuò)誤，下面有個(gè)不錯(cuò)的解決方法，大家可以參考下2014-02-02
JavaScript獲取當(dāng)前網(wǎng)頁最后修改時(shí)間的方法
這篇文章主要介紹了JavaScript獲取當(dāng)前網(wǎng)頁最后修改時(shí)間的方法,涉及javascript中document.lastModified屬性的使用技巧,需要的朋友可以參考下2015-04-04
Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件實(shí)例解析
本文通過實(shí)例代碼給大家介紹了Bootstrap Tree View簡單而優(yōu)雅的樹結(jié)構(gòu)組件,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06