JS如何對Iframe內(nèi)外頁面進行操作總結(jié)
在iframe外獲取iframe里的內(nèi)容
方式一
通過contentWindow和contentDocument這兩個API:
var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var idocument = iframe.contentDocument;
console.log("window",iwindow);//獲取iframe的window對象
console.log("document",idoc); //獲取iframe的document
console.log("html",idoc.documentElement);//獲取iframe的html
其中iframe.contentWindow可以獲取iframe的window對象,iframe.contentDocument可以獲取iframe的document對象。
方式二
結(jié)合Name屬性，通過window提供的frames獲取:
<iframe src ="/index.html" id="ifr1" name="ifr2" scrolling="yes">
<p>Your browser does not support iframes.</p>
</iframe>
<script type="text/javascript">
console.log(window.frames['ifr2'].window);
console.dir(document.getElementById("iframe").contentWindow);
</script>
在iframe內(nèi)獲取iframe外的內(nèi)容
window.parent 獲取上一級的window對象，如果還是iframe則是該iframe的window對象
window.top 獲取最頂級容器的window對象，即，就是你打開頁面的文檔
在iframe中調(diào)用父頁面中定義的方法和變量
window.parent.window.parentMethod(); window.parent.window.parentValue;
在父頁面操作iframe子頁面的方法和變量
window.frames["iframe_Name"].window.childMethod(); window.frames["iframe_Name"].window.childValue;
總結(jié)
在使用Iframe時還需要注意以下兩點：
- 要確保在iframe加載完成后再進行操作，如果iframe還未加載完成就開始調(diào)用里面的方法或變量，會產(chǎn)生錯誤；
- 如果iframe所鏈接的是外部頁面，因為安全機制不能使用同域名下的通信方式；
判斷iframe加載完成
iframe.onload = function() {
// TODO
}
不同域通信
父頁面向子頁面?zhèn)鬟f數(shù)據(jù)
利用location對象的hash值，通過它傳遞通信數(shù)據(jù)。在父頁面設(shè)置iframe的src后面多加個data字符串，然后在子頁面中通過某種方式能即時的獲取到這兒的data。
子頁面向父頁面?zhèn)鬟f數(shù)據(jù)
利用一個代理iframe，它嵌入到子頁面中，并且和父頁面必須保持是同域，然后通過它充分利用上面同域通信方式的實現(xiàn)原理，把子頁面的數(shù)據(jù)傳遞給代理iframe，然后由于代理的iframe和主頁面是同域的，所以主頁面就可以利用同域的方式獲取到這些數(shù)據(jù)。
到此這篇關(guān)于JS如何對Iframe內(nèi)外頁面進行操作的文章就介紹到這了,更多相關(guān)JS對Iframe頁面操作內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在TypeScript中,我們可以使用Class來定義類,這使得我們能夠更加結(jié)構(gòu)化地組織代碼并使用面向?qū)ο蟮乃枷脒M行開發(fā),本文小編將給大家詳細(xì)的總結(jié)一下TypeScript中Class類的基本語法,需要的朋友可以參考下2023-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序框架wepy之動態(tài)控制類名，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
layui內(nèi)置模塊layim發(fā)送圖片添加加載動畫的方法
今天小編就為大家分享一篇layui內(nèi)置模塊layim發(fā)送圖片添加加載動畫的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
javascript實現(xiàn)Email郵件顯示與刪除功能
這篇文章主要介紹了javascript實現(xiàn)Email郵件顯示與刪除功能，需要的朋友可以參考下2015-11-11
js判斷一個對象是數(shù)組（函數(shù)）的方法實例
這篇文章主要給大家介紹了關(guān)于利用js如何判斷一個對象是數(shù)組（函數(shù)）的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
弄了個很簡單的例子判斷IE瀏覽器版本是否過低，注意在IE6和IE7版本較低情況下下才看到它的提示效果，需要的朋友可以收藏下2013-11-11
淺談JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法
這篇文章主要介紹了JavaScript構(gòu)造樹形結(jié)構(gòu)的一種高效算法，對算法感興趣的同學(xué)，可以參考下2021-05-05
這篇文章主要介紹了JS圖片懶加載的優(yōu)點及實現(xiàn)原理,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01![IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]](http://img.jbzj.com/images/xgimg/bcimg8.png)
IE和Firefox的Javascript兼容性總結(jié)[推薦收藏]
長久以來JavaScript兼容性一直是Web開發(fā)者的一個主要問題。在正式規(guī)范、事實標(biāo)準(zhǔn)以及各種實現(xiàn)之間的存在的差異讓許多開發(fā)者日夜煎熬2011-10-10
javaScript window.event.keyCode 集合與測試方法
javaScript window.event.keyCode 集合，對于事件的代碼獲取可以用腳本監(jiān)聽來實現(xiàn)。2010-05-05