JS solves the communication between the IFRAME and the adaptive height problem _javascript skill

First of all, the IFRAME communication is divided into: same-domain communication and cross-domain communication.

First, the same domain communication

The so-called same domain communication refers to the a.html page nesting iframe under http://localhost/demo/iframe/iframeA.html

For example: <iframe src= "http://localhost/demo/iframe/iframeB.html" id= "Iframea" name= "Iframea" > B.html page, the two page data to communicate, such as I want to call the parent page a.html in the function of the child page we can easily think of or Google document.getElementById('iframeA').contentWindow.b(); this method, where B is a child page b.html in a function. But there's a problem with this call. I have been struggling for a long time, that is, since in Firefox to report such a mistake, as follows:

b is not a function but I clearly defined such a function on the subpage, so why do you report such a mistake? After careful analysis and Google, found that there is such a problem need to understand, when the IFRAME did not load completed I will go to the implementation of this JS would report such a mistake, so try to use this function under the Firefox iframe.onload test, there is no error, is correct so it is to determine the problem. So I want to write a compatible IE and Firefox Google write a function to determine the IFRAME has been loaded complete! , actually give a callback function to invoke the method above us.

By combining the above ideas, you can write a code like this:

<iframe src= "http://localhost/demo/iframe/iframeB.html" id= "Iframea" name= "Iframea" ></iframe>
 <div id= "Topname" >topNddddddddddddddddame</div>
 <script>
  function A () {
  alert ("a");
 }
 var iframe = document.getElementById (' Iframea ');
 
 Iframeisload (Iframe,function () {
  var obj = document.getElementById (' Iframea '). Contentwindow;
  OBJ.B ();
 });
 
  
 
 
 function Iframeisload (iframe,callback) {
 if (iframe.attachevent) {
  
  iframe.attachevent (' onload '), function ( ) {
  callback && callback ();}
  );
 else {
  iframe.onload = function () {
  callback && callback ();

 }}} </script>

The b.html code is as follows:

var B = function () {
  alert ("B");
 }

The function of the child page calling the parent page is simple, so just make it OK,window.parent.A();

The child page takes the value of the parent page element: window.parent.document.getElementById("topName").innerHTML methods.

Two: The IFRAME communicates across domains.

Cross-domain access to IFrame is generally divided into 2 kinds of cases, the first one is the same as the primary domain, the cross-domain domain of different domains. The second is: different primary domains across domains.

1, is the same as the main domain, the different subdomains between the cross-domain; you can set the same primary domain by Document.domain to resolve it.

If now I have a domain abc.example.com under a page called abc.html, the page is nested with an IFRAME as follows: <iframe src= "http://def.example.com/demo/def.html" id= "Iframe2" style= "Display:none"; ></iframe>, I want the page under the ABC domain abc.html access the def.html under the Def field we all know that because of the restriction of the same origin policy of the security viewer, JS cannot operate the pages of different ports under different protocols in different domains of the page, So it is necessary to solve cross-domain access, if the parent page abc.html page has a JS function: function test(){console.log(1);}; I want to call this function in the child page or in accordance with the above the same domain way parent.test(); to call, through the Firefox look has been across the domain solution is the top of each JS function add a sentence document.domain = 'example.com' , can be solved.

The abc.html code is as follows:

<iframe src= "http://def.example.com/demo/def.html" id= "iframe2" style= "Display:none"; ></iframe>

//cross-domain sub-page function to invoke the parent page (assuming the test function below)
document.domain = ' example.com ';
function test () {console.log (1);};

The def.html code is as follows:

 * * * Child page calls the parent page
/document.domain = ' example.com ';
Window.top.test ();
Window.parent.test ();

Or are these two pages I want the parent page to invoke the child page as follows:

The a.html code is as follows:

 * * * A function that wants to call a child page across a domain parent
document.domain = ' example.com ';
var iframe = document.getElementById (' iframe2 ');
Iframeisload (Iframe,function () {
 var obj = Iframe.contentwindow;
  Obj.child ();
});
function Iframeisload (iframe,callback) {
 if (iframe.attachevent) {
  iframe.attachevent (' onload '), function ( ) {
  callback && callback ();}
  );
 else {
  iframe.onload = function () {
  callback && callback ();
  }
 }
 }

If now the def.html page has a child function code as follows:

Document.domain = ' example.com ';
function Child () {Console.log (' I am a sub-page ');}

You can call the child page on a cross domain, whether it is a child page call or a parent page. Everything ok!

2, is different main domain cross domain;

Although there are several ways for Google to get across domain problems in different primary domains through location.hash methods or window.name methods, or HTML5 and Flash, and so on, I think the following IFrame is worth studying,

As shown in the following illustration: A domain a.com page request.html (that is, http://a.com/demo/ajax/ajaxproxy/request.html) is nested with an IFRAME pointing to the domain B.Com (http://b.com/ demo/ajax/ajaxproxy/response.html) response.html, while response.html nested the proxy.html of domain a.com.

Idea: To implement the process.php under the request.html page request domain B.Com under the a.com domain, you can pass the request parameter to response.html by URL. A real AJAX request is initiated by response.html to Process.php (response.html and process.php belong to Domain B.Com), and the returned results are passed to proxy.html via the URL, and finally due to proxy.html and reques T.html is in the same domain, so you can use Window.top in proxy.html to return the results in request.html to complete the real cross-domain.

OK, look at the page structure first

The a.com fields are:

Request.html

Proxy.html

The B.Com fields are:

Response.html

process.php

First look at the request.html page is as follows:

<! DOCTYPE html>  

This page is actually going to tell response.html: I'm going to let you execute the method you defined GetPerson and use the parameter ' {' id ': 24} ' I gave you. Response.html is simply responsible for CallBack passing this method name to the next guy Proxy.html, and proxy.html gets the CallBack method name, because Proxy.html and request.html are the same domain.

The response.html code is as follows:

<! DOCTYPE html>  

This is actually receiving requests from request.html request parameters and methods to send a real AJAX request to the server process.php, and then pass the data returned from the server and the name of the callback function passed from the request.html to proxy.html.

take a look at the PHP code below and actually want to return a JSON data:

<?php 
 $data = Json_decode (file_get_contents ("Php://input"));
 Header ("Content-type:application/json; Charset=utf-8 ");
 Echo (' {' id ': '. $data->id. ', "Age": "Sex": "Boy", "name": "Huangxueming"};
? >

The last is proxy.html code:

<! DOCTYPE html>
 
 

This is also the last step, Proxy finally got the callback function name that request.html passed through response.html and the response data from response.html, using Window.top to execute the callback function defined in request.html.

Third, the IFRAME highly adaptive problem.

The height of the IFRAME can be adaptively divided into 2 kinds, One is adaptive under the same domain, the other is adaptive under the cross domain, let's take a look at the problem of high adaptive iframe in the same domain.

1. Under the same domain IFRAME highly adaptive problem:

Idea: Get the nested IFRAME element, get the final height of the nested page through JavaScript, and then set it on the main page to implement it.

If we have iframe1.html and iframe2.html on the demo,

The following iframe1.html code is attached below:

<! DOCTYPE html>
 
 

Iframe2.html

<! DOCTYPE html>
 
 

You can dynamically set the height of the iframe1 page to iframe2 height.

2. Cross-domain IFRAME highly adaptive problem.

First we know that the IFRAME can not be controlled by the JS above, so we can only use a middle key. We can nest a iframe2.html page in a B.Com field under the A.com Domain iframe1.html page, and then I'll nest iframe2.html page with iframe1.html same field on the Iframe3.html page, so Iframe1.html and iframe3.html can communicate without hindrance because the page iframe2.html nested iframe3.html, so iframe2.html can overwrite the iframe3.html's href value.

What's in iframe1:

The iframe1.html content mainly accepts the content which the Iframe3.html page passes over and completes the corresponding operation. The iframe1.html code is as follows:

<iframe src= "http://b.com/demo/ajax/iframeheight/iframe2.html" style= "width:400px;height:200px" id= "iframe" ></iframe> 

<script>
 var ifr_el = document.getElementById ("iframe");
 function Getifrdata (data) {
 ifr_el.style.height = data+ "px";
 }
</script>

What's in iframe2.html:

Iframe2.html content is how to pass the value to the iframe3.html page, just said is the value passed to the Iframe3.html page of the href, so as long as the modification of the IFRAME src can be, because do not refresh the C page, so you can use a hash of the way to pass to the Iframe3 . html page. Iframe2.html code is as follows:

 <! DOCTYPE html>  
 

You can see by default iframe1.html page I give iframe2.html a height of 200 pixels But in iframe2.html I give iframe3.html height is 230 pixel, then there is a scroll bar normally, so now I want to get the height of the scroll bar in iframe2.html, pass the height to the src inside through iframe3.html, and then in iframe3.ht The ML page gets this height value to iframe1.html (because iframe1.html and iframe3.html are the same domain), so iframe1.html can take this height value, and then set its own height is this value OK.

The only function of the iframe3.html page is to receive the value of the iframe2.html page via href and pass it to the Iframe1.html page, where the value from the Iframe2.html page can be viewed through a timer. Location.href is It is not changed, but it feels inefficient, and there is a way onhashchange to listen for the change of href through events (ie8+,chrome5.0+,firefox3.6+,safari5.0+,opera10.6+) in a new browser.

The iframe3.html code is as follows:

<script>
 var oldheight = 0;
 
 T && clearinterval (t);
 var t = setinterval (function () {
 var height = location.href.split (' # ') [1];
 if (height && height!= oldheight) {
  oldheight = height;
  if (window.parent.parent.getIfrData) {
  window.parent.parent.getIfrData (oldheight);
  }
 }
 },200);
 </script>

This solves the problem that the adaptive height of IFrame can be achieved through cross-domain.

Iv. Summary

The above is the entire content of this article, I hope that the study of the work can help. If you have questions, you can leave a message for discussion.