利用JS對(duì)iframe父子（內(nèi)外）頁(yè)面進(jìn)行操作的方法教程

更新時(shí)間：2017年06月15日 10:26:26 投稿：daisy

這篇文章主要給大家介紹了利用JS對(duì)iframe父子（內(nèi)外）頁(yè)面進(jìn)行操作的方法教程，其中包括了怎么對(duì)iframe進(jìn)行操作、在iframe里面控制iframe外面的js代碼以及在父框架對(duì)子iframe進(jìn)行操作等，需要的朋友可以參考借鑒。

本文主要給大家介紹了關(guān)于利用JS對(duì)iframe父子（內(nèi)外）頁(yè)面進(jìn)行操作的方法，分享出來(lái)供大家參考學(xué)習(xí)，下面來(lái)一起看看詳細(xì)的介紹：

一、獲取iframe里的內(nèi)容

在開(kāi)始之前，首先我們來(lái)看看如何獲取iframe里的內(nèi)容，獲取iframe中內(nèi)容主要的兩個(gè)API就是contentWindow,和contentDocument iframe.contentWindow, 獲取iframe的window對(duì)象 iframe.contentDocument, 獲取iframe的document對(duì)象這兩個(gè)API只是DOM節(jié)點(diǎn)提供的方式(即getELement系列對(duì)象)

 var iframe = document.getElementById("iframe1");
 var iwindow = iframe.contentWindow;
 var idoc = iwindow.document;
  console.log("window",iwindow);//獲取iframe的window對(duì)象
  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

實(shí)際情況如:

另外更簡(jiǎn)單的方式是，結(jié)合Name屬性，通過(guò)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>

其實(shí)window.frames[‘ifr1’]返回的就是window對(duì)象，即

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

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

二、在iframe中獲取父級(jí)內(nèi)容

同理，在同域下，父頁(yè)面可以獲取子iframe的內(nèi)容，那么子iframe同樣也能操作父頁(yè)面內(nèi)容。在iframe中，可以通過(guò)在window上掛載的幾個(gè)API進(jìn)行獲取.

window.parent 獲取上一級(jí)的window對(duì)象，如果還是iframe則是該iframe的window對(duì)象
window.top 獲取容器的window對(duì)象，即，就是你打開(kāi)頁(yè)面的文檔
window.self 返回自身window的引用。可以理解 window===window.self(腦殘)

如圖:

獲取了之后，我們就可以進(jìn)行相關(guān)操作了。在同域的iframe中，我們可以巧妙的使用iframe的黑科技來(lái)實(shí)現(xiàn)一些trick.

iframe的輪詢

話說(shuō)在很久很久以前，我們實(shí)現(xiàn)異步發(fā)送請(qǐng)求是使用iframe實(shí)現(xiàn)的~! 怎么可能!!! 真的史料為證(自行g(shù)oogle), 那時(shí)候?yàn)榱瞬惶D(zhuǎn)頁(yè)面，提交表單時(shí)是使用iframe提交的。現(xiàn)在，前端發(fā)展真快，websocket,SSE,ajax等，逆天skill的出現(xiàn)，顛覆了iframe, 現(xiàn)在基本上只能活在IE8,9的瀏覽器內(nèi)了。但是，寶寶以為這樣就可以不用了解iframe了,而現(xiàn)實(shí)就是這么殘酷，我們目前還需要兼容IE8+。所以，iframe 實(shí)現(xiàn)長(zhǎng)輪詢和長(zhǎng)連接的trick 我們還是需要涉獵滴。

iframe長(zhǎng)輪詢

如果寫(xiě)過(guò)ajax的童鞋，應(yīng)該知道，長(zhǎng)輪詢就是在ajax的readyState = 4的時(shí)，再次執(zhí)行原函數(shù)即可。這里使用iframe也是一樣，異步創(chuàng)建iframe，然后reload, 和后臺(tái)協(xié)商好, 看后臺(tái)哥哥們將返回的信息放在,然后獲取里面信息即可. 這里是直接放在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(); //刷新頁(yè)面,再次獲取信息，并且會(huì)觸發(fā)onload函數(shù)
 },2000);
 }

這樣就可以實(shí)現(xiàn)ajax的長(zhǎng)輪詢的效果。當(dāng)然，這里只是使用reload進(jìn)行獲取，你也可以添加iframe和刪除iframe的方式，進(jìn)行發(fā)送信息，這些都是根據(jù)具體場(chǎng)景應(yīng)用的。另外在iframe中還可以實(shí)現(xiàn)異步加載js文件，不過(guò)，iframe和主頁(yè)是共享連接池的，現(xiàn)在基本上都被XHR和hard calllback取締了，這里也不過(guò)多介紹了。

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

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

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

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

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

$("#objid",parent.document)

4. jquery在父頁(yè)面獲取iframe子頁(yè)面的元素

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

5.在iframe中調(diào)用父頁(yè)面中定義的方法和變量：

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

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

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

一、同域下父子頁(yè)面的通信

父頁(yè)面parent.html

<html>
<head>
 <script type="text/javascript">
  function say(){
   alert("parent.html");
  }
  function callChild(){
   myFrame.window.say();
   myFrame.window.document.getElementById("button").value="調(diào)用結(jié)束";
  }
 </script>
</head>
<body>
 <input id="button" type="button" value="調(diào)用child.html中的函數(shù)say()" onclick="callChild()"/>
 <iframe name="myFrame" src="http://caibaojian.com/child.html"></iframe>
</body>
</html>

子頁(yè)面child.html

<html>
<head>
 <script type="text/javascript">
  function say(){
   alert("child.html");
  }
  function callParent(){
   parent.say();
   parent.window.document.getElementById("button").value="調(diào)用結(jié)束";
  }
 </script>
</head>
<body>
 <input id="button" type="button" value="調(diào)用parent.html中的say()函數(shù)" onclick="callParent()"/>
</body>
</html>

注意事項(xiàng)

要確保在iframe加載完成后再進(jìn)行操作，如果iframe還未加載完成就開(kāi)始調(diào)用里面的方法或變量，會(huì)產(chǎn)生錯(cuò)誤。判斷iframe是否加載完成有兩種方法：

1. iframe上用onload事件

2. 用document.readyState=="complete"來(lái)判斷

二、跨域父子頁(yè)面通信方法

如果iframe所鏈接的是外部頁(yè)面，因?yàn)榘踩珯C(jī)制就不能使用同域名下的通信方式了。

1.父頁(yè)面向子頁(yè)面?zhèn)鬟f數(shù)據(jù)

實(shí)現(xiàn)的技巧是利用location對(duì)象的hash值，通過(guò)它傳遞通信數(shù)據(jù)。在父頁(yè)面設(shè)置iframe的src后面多加個(gè)data字符串，然后在子頁(yè)面中通過(guò)某種方式能即時(shí)的獲取到這兒的data就可以了，例如：

1.1 在子頁(yè)面中通過(guò)setInterval方法設(shè)置定時(shí)器，location.href的變化即可獲得上面的data信息

1.2. 然后子頁(yè)面根據(jù)這個(gè)data信息進(jìn)行相應(yīng)的邏輯處理

2.子頁(yè)面向父頁(yè)面?zhèn)鬟f數(shù)據(jù)

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。