JS如何對(duì)Iframe內(nèi)外頁(yè)面進(jìn)行操作總結(jié)

更新時(shí)間：2021年10月12日 15:56:41 作者：道系小布丁

iframe標(biāo)簽是一個(gè)內(nèi)聯(lián)框架,即用來(lái)在當(dāng)前HTML頁(yè)面中嵌入另一個(gè)文檔的,且所有主流瀏覽器都支持iframe標(biāo)簽,這篇文章主要給大家介紹了關(guān)于JS如何對(duì)Iframe內(nèi)外頁(yè)面進(jìn)行操作的相關(guān)資料,需要的朋友可以參考下

在iframe外獲取iframe里的內(nèi)容

方式一

通過(guò)contentWindow和contentDocument這兩個(gè)API:

var iframe = document.getElementById("iframe1");
var iwindow = iframe.contentWindow;
var idoc = iwindow.document;
var idocument = iframe.contentDocument;
console.log("window",iwindow);//獲取iframe的window對(duì)象
console.log("document",idoc);  //獲取iframe的document
console.log("html",idoc.documentElement);//獲取iframe的html

其中iframe.contentWindow可以獲取iframe的window對(duì)象,iframe.contentDocument可以獲取iframe的document對(duì)象。

方式二

結(jié)合Name屬性，通過(guò)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 獲取上一級(jí)的window對(duì)象，如果還是iframe則是該iframe的window對(duì)象
window.top 獲取最頂級(jí)容器的window對(duì)象，即，就是你打開(kāi)頁(yè)面的文檔

在iframe中調(diào)用父頁(yè)面中定義的方法和變量

window.parent.window.parentMethod();
window.parent.window.parentValue;

在父頁(yè)面操作iframe子頁(yè)面的方法和變量

window.frames["iframe_Name"].window.childMethod();
window.frames["iframe_Name"].window.childValue;

總結(jié)

在使用Iframe時(shí)還需要注意以下兩點(diǎn)：

要確保在iframe加載完成后再進(jìn)行操作，如果iframe還未加載完成就開(kāi)始調(diào)用里面的方法或變量，會(huì)產(chǎn)生錯(cuò)誤；
如果iframe所鏈接的是外部頁(yè)面，因?yàn)榘踩珯C(jī)制不能使用同域名下的通信方式；

判斷iframe加載完成

iframe.onload = function() {
    // TODO
}

不同域通信

父頁(yè)面向子頁(yè)面?zhèn)鬟f數(shù)據(jù)

利用location對(duì)象的hash值，通過(guò)它傳遞通信數(shù)據(jù)。在父頁(yè)面設(shè)置iframe的src后面多加個(gè)data字符串，然后在子頁(yè)面中通過(guò)某種方式能即時(shí)的獲取到這兒的data。

子頁(yè)面向父頁(yè)面?zhèn)鬟f數(shù)據(jù)

利用一個(gè)代理iframe，它嵌入到子頁(yè)面中，并且和父頁(yè)面必須保持是同域，然后通過(guò)它充分利用上面同域通信方式的實(shí)現(xiàn)原理，把子頁(yè)面的數(shù)據(jù)傳遞給代理iframe，然后由于代理的iframe和主頁(yè)面是同域的，所以主頁(yè)面就可以利用同域的方式獲取到這些數(shù)據(jù)。

到此這篇關(guān)于JS如何對(duì)Iframe內(nèi)外頁(yè)面進(jìn)行操作的文章就介紹到這了,更多相關(guān)JS對(duì)Iframe頁(yè)面操作內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: