JS method of operating iframe parent-child (internal and external) pages

This article mainly introduces the method of using JS to operate the iframe parent-child (internal and external) pages, and shares it for your reference and learning. Let's take a look at the detailed introduction:

First, get the content of the iframe

Before we start, let's first take a look at how to get the content in the iframe. The two main APIs for getting the content in the iframe are contentWindow, and contentDocument iframe.contentWindow, to get the window object  iframe.contentDocumentof the iframe, and to get the document object of the iframe. These two APIs are just the way provided by the DOM node. (ie getELement series object)

?

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

The actual situation is as follows:

Another simpler way is to combine the Name property and get it through the frames provided by the window.

?

<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>

In fact window.frames[‘ifr1'], what is returned is the window object, that is,

?

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

It depends on which method you want to use to get the window object, both are fine, but I prefer the second one to use frames[xxx]. Because there are fewer letters~ Then, you can manipulate the DOM inside the iframe content.

Second, get the parent content in the iframe

Similarly, under the same domain, the parent page can obtain the content of the child iframe, then the child iframe can also manipulate the content of the parent page. In an iframe, it can be obtained through several APIs mounted on the window.

• window.parent Get the window object of the previous level, if it is still an iframe, it is the window object of the iframe
• window.top Get the window object of the top-level container, that is, the document of the page you opened
• window.self Returns a reference to its own window. understandable  window===window.self(brain)

As shown in the figure:

After obtaining it, we can perform related operations. In the iframe of the same domain, we can cleverly use the black technology of iframe to realize some tricks.

Polling of iframes

In other words, a long, long time ago, we used iframe to implement asynchronous sending requests~! How is it possible!!! The historical data proves it (Google yourself), at that time, in order not to jump to the page, the form was submitted using iframe. Now, the front-end development is really fast, websocket, SSE, ajax, etc. The emergence of anti-sky skills has subverted the iframe, and now basically it can only live in the browser of IE8 and 9. However, the baby thinks that this way you don't need to know about iframe, but the reality is so cruel, we still need to be compatible with IE8+. Therefore, we still need to dabble in the trick that iframe implements long polling and long connection.

iframe long polling

If you have written ajax children's shoes, you should know that long polling is to execute the original function again when the readyState of ajax = 4. The same is true for using iframes here. Create the iframe asynchronously, then reload it, and negotiate with the background. Watch the background brothers put the returned information, and then get the information inside. Here it is directly in the 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);
 }

In this way, the effect of long polling of ajax can be achieved. Of course, here is just to use reload to obtain, you can also add iframes and delete iframes to send information, these are applied according to specific scenarios. In addition, js files can also be loaded asynchronously in the iframe. However, the iframe and the home page share the connection pool, so it is still very painful. Now they are basically banned by XHR and hard calllback, and I will not introduce too much here.

1.js operates the parent page element code on the iframe child page:

?

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

2.js gets the iframe child page element code on the parent page as follows:

?

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

3. jQuery gets the parent page element code from the iframe child page as follows:

?

$("#objid",parent.document)

4. jquery get the element of the iframe child page in the parent page

?

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

5. Call the methods and variables defined in the parent page in the iframe:

?

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

6. Methods and variables for operating iframe child pages on the parent page

?

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

1. Communication between parent and child pages under the same domain

Parent page 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 page 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>

Precautions

要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：

      1. iframe上用onload事件

      2. 用document.readyState=="complete"来判断

二、跨域父子页面通信方法

如果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对象的引用。

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。