iframe應用 相互之間發送消息 postMessage


IFRAME
  IFRAME 元素也就是文檔中的文檔

window 對象
  瀏覽器會在其打開一個 HTML 文檔時創建一個對應的 window 對象。但是,如果一個文檔定義了一個或多個框架(即,包含一個或多個 frame 或 iframe 標簽),瀏覽器就會為原始文檔創建一個 window 對象,再為每個框架創建額外的 window 對象。這些額外的對象是原始窗口的 子窗口,可能被原始窗口中發生的事件所影響。例如,關閉原始窗口將導致關閉全部子窗口。如果想要創建新窗口(以及對應的 window 對象),可以使用像 open, showModalDialog 和 showModelessDialog 這樣的方法。

contentWindow
  contentWindow屬性是指指定的frame或者iframe所在的window對象在IE中iframe或者frame的contentWindow屬性可以省略,但在Firefox中如果要對iframe對象進行編輯則必須指定contentWindow屬性。

一、在使用iframe的頁面,要操作這個iframe里面的DOM元素可以用:
contentWindow、contentDocument(測試的時候chrom瀏覽器,要在服務器環境下)

1.先獲取iframe里面的window對象,再通過這個對象,獲取到里面的DOM元素

例子:
var ifr = document.getElementById("iframe");
ifr.contentWindow.document.getElementById("XXXXX")
<iframe src="a.html" id=""></iframe>
ifr.contentWindow 這里,返回的是iframe的window對象,所以后面可以接着調用document方法,再接着調用getElementByTagName。那么就可以對iframe里面的元素進行操作了。

二、在iframe本頁面,要操作這個iframe的父頁面的DOM元素(即嵌套這個iframe的頁面)可以用:
window.parent、window.top(這里的TOP是獲取的頂層,即有多層嵌套iframe的時候使用)

var ifr = document.getElementByTagName("iframe");
ifr.parent.document.getElementById("XXXXX")
<iframe src="a.html" id=""></iframe>

三、onload事件

非IE下用法
ifr.onload = function(){
  //SOMETHING
}

IE下,需要綁定
ifr.attachEvent("onload",function(){
  //SOMETHING
})

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM