JS iFrame加載慢怎么解決

更新時間：2016年05月13日 10:06:01 投稿：mrr

這篇文章主要介紹了JS iFrame加載慢的解決方法，非常實用，感興趣的朋友一起學習吧

在項目中經(jīng)常要動態(tài)添加iframe，然后再對添加的iframe進行相關操作，有時候會遇到iframe加載很慢什么原因呢，該如何解決呢？帶著這個問題一起通過本文學習，尋找答案吧！

aaa.html

<HTML>
<HEAD>
<TITLE>aaa</TITLE>
</HEAD>
<BODY>
<IFRAME src="bbb.html" name=bbb width="100%" height="190"> </IFRAME>
<INPUT type="button" value="顯示text控件值" onclick="alert(bbb.document.all.txt.value)"> 
<SCRIPT LANGUAGE="JavaScript">
alert(bbb.document.all.txt.value);
</SCRIPT>
</BODY>
</HTML>

bbb.html

<HTML>
<HEAD>
<TITLE>bbb</TITLE>
</HEAD>
<BODY>
<input type=text name=txt value="guoguo"> 
</BODY>
</HTML>

問題：

執(zhí)行上面的aaa.html發(fā)現(xiàn)代碼直接alert的值沒有打出來，而點擊按鈕卻可以打出其值。

分析：

頁面加載時，遇到iframe就直接跳過去，加載下面的內(nèi)容，然后再回來加載iframe，當然也可以理解成遇到iframe又開了一個線程來加載iframe，但是因為涉及到新的IO操作比較耗時，所以加載完成iframe還是晚于頁面下部的js代碼執(zhí)行，所以出現(xiàn)了上面的問題。

解決方法：

在js代碼中加個延遲（具體延遲多長時間可以憑個人經(jīng)驗了），這樣就可以保證正常得到iframe中的對象了。

<SCRIPT LANGUAGE="JavaScript">
setTimeout("alert(bbb.document.all.txt.value)",1500);
</SCRIPT>

結(jié)論：當一個頁面中包含了iframe時，如果我們要通過js來操作iframe中的對象，一定要等到iframe加載完畢之后再操作，否則得不到想要的對象。

以上所述是小編給大家介紹的JS iFrame加載慢的解決辦法，希望對大家有所幫助，同時也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

JS實現(xiàn)二維數(shù)組橫縱列轉(zhuǎn)置的方法
下面小編就為大家分享一篇JS實現(xiàn)二維數(shù)組橫縱列轉(zhuǎn)置的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-04-04
js實現(xiàn)首屏延遲加載實現(xiàn)方法 js實現(xiàn)多屏單張圖片延遲加載效果
這篇文章主要介紹了js實現(xiàn)首屏延遲加載實現(xiàn)方法，以及js實現(xiàn)多屏單張圖片延遲加載效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-07-07
詳解js中常用4個基礎算法
本文主要介紹了JS中常用的四個基礎算法，主要介紹了冒泡排序，選擇排序，插入排序和快速排序這四種算法,需要的朋友可以參考下
2023-05-05
使用 JavaScript 在沒有插件的情況下輸入文本掩碼的示例詳解
這篇文章主要介紹了使用 JavaScript 在沒有插件的情況下輸入文本掩碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2023-06-06
基于wordpress的ajax寫法詳解
下面小編就為大家分享一篇基于wordpress的ajax寫法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-01-01
原生JavaScript實現(xiàn)的簡單放大鏡效果示例
這篇文章主要介紹了原生JavaScript實現(xiàn)的簡單放大鏡效果,涉及javascript事件響應及頁面元素屬性動態(tài)操作相關實現(xiàn)技巧,需要的朋友可以參考下
2018-02-02
JavaScript 命名空間使用介紹
使用JavaScript實現(xiàn)命名空間就沒有這么舒服了，Javascript只有函數(shù)作用域，什么塊兒啊、神馬文件啊統(tǒng)統(tǒng)都認為是一個命名空間的，有時候因為一些重名問題導致的錯誤讓人莫名其妙，難以調(diào)試解決
2013-08-08
微信小程序map地圖使用方法詳解
這篇文章主要為大家詳細介紹了微信小程序map地圖使用的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-10-10
用幾道面試題來看JavaScript執(zhí)行機制
這篇文章主要介紹了JavaScript的執(zhí)行機制，對此感興趣的同學，可以參考下
2021-04-04
JS 仿騰訊發(fā)表微博的效果代碼
這篇文章主要介紹了JS 仿騰訊發(fā)表微博的效果代碼，有需要的朋友參考一下
2013-12-12