js操作iframe的一些方法介紹_javascript技巧

1. 取得iframe的window物件
存在跨域存取限制。

chrome：iframeElement. contentWindow
firefox：iframeElement.contentWindow
ie6：iframeElement.contentWindow

文章Iframes, onload, and document.domain中說“he iframe element object has a property called contentDocument that contains the iframe's document object, so you can dow the parents sperdow the parent to window the parents sdow the parents”是一些意思.可以透過iframeElement.contentDocument.parentWindow取得iframe的window物件。但經過測試firefox、chrome的element.contentDocument物件沒有parentWindow屬性。

(javascript)

複製程式碼 程式碼如下:

    return  element.contentWindow;  
    //return  element.contentWindow element.contentDocument.parentWindow;  
} 


2. 取得iframe的document物件

存在跨域存取限制。
chrome：iframeElement.contentDocumentfirefox：iframeElement.contentDocument

ie：element.contentWindow.document

備註：ie沒有iframeElement.contentDocument屬性。

(javascript)

複製程式碼 程式碼如下:var getIameToment ) {  

    return  element.contentDocument || element.contentWindow.document;  

};  

3. iframe中取得父頁的window物件

存在跨域存取限制。
父頁：window.parent頂層頁面：window.top

適用於所有瀏覽器

4. 取得iframe在父頁中的html標籤

存在跨域存取限制。
window.frameElement（類型：HTMLElement），適用於所有瀏覽器

5. iframe的onload事件

非ie瀏覽器都提供了onload事件。例如下面程式碼在ie中是不會有彈出框的。
(javascript)

複製程式碼 程式碼如下:var ifrm. ('iframe');  

ifr.src = 'http://www.jb51.net/index.php';  

ifr.onload = function() {  
    alert('loaded');
};  
document.body.appendChild(ifr);  


但是ie卻又似乎提供了onload事件，以下兩種方法都會觸發onload

方法一：

複製程式碼 代碼如下:

代碼如下:

代碼如下:

代碼如下:  
 

  方法二：    //只有ie才支援傳遞給createElement這樣的參數

複製程式碼

複製程式碼

程式碼如下:

var ifr = document.createElement('' );   document.body.appendChild(ifr);   由於iframe元素包含於父級頁面中，因此上述方法皆不存在跨域問題。 實際上IE提供了onload事件，但必須使用attachEvent進行綁定。

複製程式碼


程式碼如下:

var ifr = document.createElement('ifcreate); ifr.src = 'http://b.jb51.net/b.php';   if (ifr.attachEvent) {       ifr.attach('onload',Event. function(){ alert( 'loaded'); });   } else {       ifr.onload  = function() { alert('loaded'); };   }   Chi.

6. frames
window.frames可以取到頁面中的幀(iframe、frame等)，需要注意的是取到的是window對象，而不是HTMLElement。

複製程式碼 程式碼如下:

var ifr1 = document.getElementByfr.
var ifr1win = window.frames[0];  
ifr1win.frameElement === ifr1;   // true  
ifr1win === ifr1