詳解iframe的src指向的內(nèi)容不刷新的解決辦法
我要評(píng)論問(wèn)題描述
html
<iframe id="h5Content" src=""></iframe>
js
$("#h5Content").attr("src","${h5.url}");
h5.url對(duì)應(yīng)的是一個(gè)ueditor編輯好存到數(shù)據(jù)庫(kù)的一個(gè)頁(yè)面.
修改這個(gè)頁(yè)面內(nèi)容提交后,iframe 中呈現(xiàn)的頁(yè)面并沒(méi)有變化.
原因
iframe的src的值發(fā)生改變,才會(huì)刷新iframe里面的內(nèi)容.
所以雖然我代碼的url對(duì)應(yīng)的頁(yè)面有變化了,可是url一直不變,也就是iframe的src的值一直沒(méi)變.所以不刷新內(nèi)容;
解決辦法
原因找到了,解決就非常容易了.想任何一種辦法讓iframe的src的值有變化就可以了.
我當(dāng)時(shí)的解決辦法如下:
$("#h5Content").attr("src","${h5.url}"+"?time="+new Date().getTime());
給url后面通過(guò)問(wèn)號(hào)傳值,傳一個(gè)當(dāng)前時(shí)間,就解決了.這個(gè)值并沒(méi)有其他用處,只是為了改變src的值.
PS：iframe緩存不刷新問(wèn)題徹底解決方法
這兩天遇到一個(gè)很奇怪的問(wèn)題，一個(gè)頁(yè)面嵌套了一個(gè)iframe頁(yè)面，當(dāng)這個(gè)頁(yè)面提交后再次跳轉(zhuǎn)到本頁(yè)面時(shí)，原本iframe內(nèi)的頁(yè)面應(yīng)該刷新數(shù)據(jù)的，結(jié)果在ie下面卻沒(méi)刷新（FF下沒(méi)問(wèn)題），必須手動(dòng)F5或者新開(kāi)一個(gè)瀏覽器標(biāo)簽頁(yè)瀏覽才能刷新，否則在本頁(yè)面的瀏覽器上按回車(chē)是沒(méi)用的，查閱了很多資料，最后終于發(fā)現(xiàn)是iframe緩存機(jī)制在搞鬼，用以下方法即可解決：
<script type="text/javascript">
var randomnumber=Math.floor(Math.random()*100000)
document.write('
<iframe src="http://www.freedonation.com/hunger/hunger_thankyou.php3?random='+randomnumber+'" name="aframe" width="100%" height="400"></iframe>')
</script>
通過(guò)請(qǐng)求多加一個(gè)值為隨機(jī)數(shù)的參數(shù)，這樣瀏覽器認(rèn)為每次請(qǐng)求的頁(yè)面都是新的而保證了iframe頁(yè)面每次都是重新加載的。
到此這篇關(guān)于詳解iframe的src指向的內(nèi)容不刷新的解決辦法 的文章就介紹到這了,更多相關(guān)iframe的src指向不刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了iframe與window.onload如何使用詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-05-07
遮罩層 + Iframe實(shí)現(xiàn)界面自動(dòng)顯示的示例代碼
這篇文章主要介紹了遮罩層 + Iframe實(shí)現(xiàn)界面自動(dòng)顯示的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2020-04-26通過(guò)iframe監(jiān)聽(tīng)一個(gè)DOM元素大小變化
開(kāi)發(fā)過(guò)程中經(jīng)常遇到的一個(gè)問(wèn)題就是如何監(jiān)聽(tīng)一個(gè) div 的size變化。今天小編通過(guò)本文給大家介紹通過(guò)iframe元素來(lái)實(shí)現(xiàn)監(jiān)聽(tīng)。本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋2020-04-17
關(guān)于解決iframe標(biāo)簽嵌套問(wèn)題的解決方法
這篇文章主要介紹了關(guān)于解決iframe標(biāo)簽嵌套問(wèn)題的解決方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2020-03-04如何用iframe套用對(duì)方網(wǎng)頁(yè)數(shù)據(jù)而又保持兼容的實(shí)現(xiàn)方法
這篇文章主要介紹了如何用iframe套用對(duì)方網(wǎng)頁(yè)數(shù)據(jù)而又保持兼容的實(shí)現(xiàn)方法,需要的朋友可以參考下2020-01-28使用iframe+postMessage實(shí)現(xiàn)頁(yè)面跨域通信的示例代碼
這篇文章主要介紹了使用iframe+postMessage實(shí)現(xiàn)頁(yè)面跨域通信的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面2020-01-14- 這篇文章主要介紹了iframe跨域的幾種常用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
詳解使用postMessage解決iframe跨域通信問(wèn)題
這篇文章主要介紹了詳解使用postMessage解決iframe跨域通信問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小2019-11-01
這篇文章主要介紹了跨域修改iframe頁(yè)面內(nèi)容詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)2019-10-31關(guān)于iframe跨域使用postMessage的實(shí)現(xiàn)
這篇文章主要介紹了關(guān)于iframe跨域使用postMessage的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一2019-10-29
