JS對iframe父子（內外）頁面進行操做的方法

時間 2019-11-17

原文原文鏈接

本文主要給你們介紹了關於利用JS對iframe父子（內外）頁面進行操做的方法，分享出來供你們參考學習，下面來一塊兒看看詳細的介紹：javascript

1、獲取iframe裏的內容html

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

?java

1jquery

2web

3ajax

4跨域

5瀏覽器

6安全

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 ="/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對象，即

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

這裏就看你想用哪種方式獲取window對象，二者都行，不過本人更傾向於第二種使用frames[xxx].由於，字母少啊喂~ 而後，你就能夠操控iframe裏面的DOM內容。

2、在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子頁面操做父頁面元素代碼：

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

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

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

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

1	`$("#objid",parent.document)`

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

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

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

1 2	`window.parent.window.parentMethod();` `window.parent.window.parentValue;`

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

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

1、同域下父子頁面的通訊

父頁面parent.html

<html>

<head>

<script type="text/javascript">

function say(){

alert("parent.html");

}

function callChild(){

myFrame.window.say();

myFrame.window.document.getElementById("button").value="調用結束";

}

</script>

</head>

<body>

<input id="button" type="button" value="調用child.html中的函數say()" onclick="callChild()"/>

<iframe name="myFrame" src="http://caibaojian.com/child.html"></iframe>

</body>

</html>

子頁面child.html

<html>

<head>

<script type="text/javascript">

function say(){

alert("child.html");

}

function callParent(){

parent.say();

parent.window.document.getElementById("button").value="調用結束";

}

</script>

</head>

<body>

<input id="button" type="button" value="調用parent.html中的say()函數" onclick="callParent()"/>

</body>

</html>

注意事項

要確保在iframe加載完成後再進行操做，若是iframe還未加載完成就開始調用裏面的方法或變量，會產生錯誤。判斷iframe是否加載完成有兩種方法：

1. iframe上用onload事件

2. 用document.readyState=="complete"來判斷

2、跨域父子頁面通訊方法

若是iframe所連接的是外部頁面，由於安全機制就不能使用同域名下的通訊方式了。

1.父頁面向子頁面傳遞數據

實現的技巧是利用location對象的hash值，經過它傳遞通訊數據。在父頁面設置iframe的src後面多加個data字符串，而後在子頁面中經過某種方式能即時的獲取到這兒的data就能夠了，例如：

1.1 在子頁面中經過setInterval方法設置定時器，監聽location.href的變化便可得到上面的data信息

1.2. 而後子頁面根據這個data信息進行相應的邏輯處理

2.子頁面向父頁面傳遞數據

實現技巧就是利用一個代理iframe，它嵌入到子頁面中，而且和父頁面必須保持是同域，而後經過它充分利用上面第一種通訊方式的實現原理就把子頁面的數據傳遞給代理iframe，而後因爲代理的iframe和主頁面是同域的，因此主頁面就能夠利用同域的方式獲取到這些數據。使用 window.top或者window.parent.parent獲取瀏覽器最頂層window對象的引用。

總結

以上就是這篇文章的所有內容了，但願本文的內容對你們的學習或者工做能帶來必定的幫助，若有疑問你們能夠留言交流，謝謝你們對腳本之家的支持。