iframe中父子窗口的調用

時間 2019-11-16

標籤 iframe 父子窗口調用欄目 HTML 简体版

原文原文鏈接

1、iframe標籤詳解

<iframe src="1.html" frameborder="0" id="child"></iframe>

(1)操做子窗口：frames['child'].contentDocument || frames['child'].document

1.首先獲取iframe節點：html

var myIframe = document.getElementById('child');
或
var myIframe = frames['child']; 
或
var myIframe = window.frames['child'];
或
var myIframe = child;

window對象的frames屬性返回一個相似數組的對象，成員是全部子窗口的window對象。好比，frames[0]返回第一個子窗口。若是iframe設置了id或name，那麼屬性值會自動成爲全局變量，而且能夠經過window.frames屬性引用，返回子窗口的window對象。數組

window.frames['child'] === frames['child'] === child === document.getElementById('child');

2.而後獲取iframe包含的document對象:瀏覽器

IE瀏覽器：框架

var childDocument = myIframe.document;

其餘瀏覽器：post

var childDocument = myIframe.contentWindow.document;    
或
var childDocument = myIframe.contentDocument;

contentWindow屬性得到iframe節點包含的window對象，
contentDocument屬性得到包含的document對象，等價於contentWindow.documentthis

注意：iframe元素遵照同源政策，只有當父頁面與框架頁面來自同一個域名，二者之間才能夠用腳本通訊，不然只有使用window.postMessage方法。code

(2)操做父窗口：iframe.parent

iframe窗口內部，使用window.parent引用父窗口。若是當前頁面沒有父窗口，則window.parent屬性返回自身。所以，能夠經過window.parent是否等於window.self，判斷當前窗口是否爲iframe窗口。htm

if (window.parent !== window.self) {
    //當前窗口是子窗口
    var parentDocument = window.parent.document;
}

2、iframe中父子窗口操做實例

父頁面：對象

<body>
<div id="myList">
</div>
<iframe src="1.html" frameborder="0" id="child"></iframe>
</body>

子頁面：get

<body>
<div id="content">
這是子頁面
</div>
</body>

父頁面調取子頁面內容：

frames['child'].onload = function () {
    var childDocument = this.contentDocument || this.document;   
}

子頁面調取父頁面內容：

if (window.parent !== window.self) {
    var parentDocument = window.parent.document;
}

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。