JS iFrame加載慢怎么解決

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

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

在項(xiàng)目中經(jīng)常要?jiǎng)討B(tài)添加iframe，然后再對(duì)添加的iframe進(jìn)行相關(guān)操作，有時(shí)候會(huì)遇到iframe加載很慢什么原因呢，該如何解決呢？帶著這個(gè)問題一起通過本文學(xué)習(xí)，尋找答案吧！

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的值沒有打出來，而點(diǎn)擊按鈕卻可以打出其值。

分析：

頁面加載時(shí)，遇到iframe就直接跳過去，加載下面的內(nèi)容，然后再回來加載iframe，當(dāng)然也可以理解成遇到iframe又開了一個(gè)線程來加載iframe，但是因?yàn)樯婕暗叫碌腎O操作比較耗時(shí)，所以加載完成iframe還是晚于頁面下部的js代碼執(zhí)行，所以出現(xiàn)了上面的問題。

解決方法：

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

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

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

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

您可能感興趣的文章:

相關(guān)文章

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