一、獲取iframe里的內容

在開始之前，首先我們來看看如何獲取iframe里的內容，獲取iframe中內容主要的兩個API就是contentWindow,和contentDocument iframe.contentWindow, 獲取iframe的window對象 iframe.contentDocument, 獲取iframe的document對象 這兩個API只是DOM節點提供的方式(即getELement系列對象)

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

實際情況如:

另外更簡單的方式是，結合Name屬性，通過window提供的frames獲取.

<iframe src =http://www.3lian.com/edu/2017/06-15/"/index.html" id="ifr1" name="ifr1" scrolling="yes"> <p>Your browser does not support iframes.</p> </iframe> <script type="text/javascript"> console.log(window.frames['ifr1'].window); console.dir(document.getElementById("ifr1").contentWindow); </script>

其實window.frames[‘ifr1']返回的就是window對象，即

window.frames['ifr1']===window

這里就看你想用哪一種方式獲取window對象，兩者都行，不過本人更傾向于第二種使用frames[xxx].因為，字母少啊喂~ 然后，你就可以操控iframe里面的DOM內容。

二、在iframe中獲取父級內容

同理，在同域下，父頁面可以獲取子iframe的內容，那么子iframe同樣也能操作父頁面內容。在iframe中，可以通過在window上掛載的幾個API進行獲取.

window.parent 獲取上一級的window對象，如果還是iframe則是該iframe的window對象

window.top 獲取最頂級容器的window對象，即，就是你打開頁面的文檔

window.self 返回自身window的引用。可以理解 window===window.self(腦殘)

如圖:

獲取了之后，我們就可以進行相關操作了。 在同域的iframe中，我們可以巧妙的使用iframe的黑科技來實現一些trick.

iframe的輪詢

話說在很久很久以前，我們實現異步發送請求是使用iframe實現的~! 怎么可能!!! 真的史料為證(自行google), 那時候為了不跳轉頁面，提交表單時是使用iframe提交的。現在，前端發展尼瑪真快，websocket,SSE,ajax等，逆天skill的出現，顛覆了iframe, 現在基本上只能活在IE8,9的瀏覽器內了。 但是，寶寶以為這樣就可以不用了解iframe了,而現實就是這么殘酷，我們目前還需要兼容IE8+。所以，iframe 實現長輪詢和長連接的trick 我們還是需要涉獵滴。

iframe長輪詢

如果寫過ajax的童鞋，應該知道，長輪詢就是在ajax的readyState = 4的時，再次執行原函數即可。 這里使用iframe也是一樣，異步創建iframe，然后reload, 和后臺協商好, 看后臺哥哥們將返回的信息放在,然后獲取里面信息即可. 這里是直接放在body里.

var iframeCon = docuemnt.querySelector('#container'), text; //傳遞的信息 var iframe = document.createElement('iframe'), iframe.id = "frame", iframe.style = "display:none;", iframe.name="polling", iframe.src="target.html"; iframeCon.appendChild(iframe); iframe.onload= function(){ var iloc = iframe.contentWindow.location, idoc = iframe.contentDocument; setTimeout(function(){ text = idoc.getElementsByTagName('body')[0].textContent; console.log(text); iloca.reload(); //刷新頁面,再次獲取信息，并且會觸發onload函數 },2000); }

這樣就可以實現ajax的長輪詢的效果。 當然，這里只是使用reload進行獲取，你也可以添加iframe和刪除iframe的方式，進行發送信息，這些都是根據具體場景應用的。另外在iframe中還可以實現異步加載js文件，不過，iframe和主頁是共享連接池的，所以還是很蛋疼的，現在基本上都被XHR和hard calllback取締了，這里也不過多介紹了。

1.js在iframe子頁面操作父頁面元素代碼：

window.parent.document.getElementByIdx_x("父頁面元素id");

2.js在父頁面獲取iframe子頁面元素代碼如下:

window.frames["iframe_ID"].document.getElementByIdx_x("子頁面元素id");

3. jquery在iframe子頁面獲取父頁面元素代碼如下:

$("#objid",parent.document)

4. jquery在父頁面獲取iframe子頁面的元素

$("#objid",document.frames('iframename').document)

5.在iframe中調用父頁面中定義的方法和變量：

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

6.在父頁面操作iframe子頁面的方法和變量

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

一、同域下父子頁面的通信

父頁面parent.html