關於如何獲取iframe中的元素

今天研究了一下iframe中元素的獲取，發現有些地方還是有點坑的。

首先：如果使用純前端手段，是沒有辦法獲取非同源的iframe中的元素的，后面會提到后端手段

一、同源環境

　1、首先在父頁面獲取iframe中的window，然后獲取元素，根據window，不僅可以獲取元素，還能調用里面的方法，前提是綁定在window上面

var ifW = $('#ifr')[0].contentWindow;

ifW.document.getElementsByClassName('wrap')

 2、在iframe中獲取父頁面的window

window.parent

3、那么問題來了。這里有些人可能發現，獲取元素的時候，根本獲取不到，或者有時候有，有時候沒有，很奇怪。。。其實呢，這是因為你引入iframe的時候，不能確定iframe是否加載完成，另外具體是iframe里面的js先執行，還是父頁面的js先執行，也是個問題。既然問題找到了，那就可以給　　

ifW.document.getElementsByClassName('wrap')
這句代碼加個延時，或者寫在點擊事件里面，等點擊觸發才去獲取，這個時候就沒有問題了

二、非同源
可以使用 HTML5的api  ， window.postMessage

在 iframe 里面，向父頁面發送消息

window.top.postMessage("close",'*');

　　

在父頁面，，監聽消息

window.addEventListener("message", function(event){
	var origin = event.origin || event.originalEvent.origin; 
				
}, false);

 

當然也可以在 iframe里面監聽事件， 父頁面發送消息