js cross-domain problem cross-domain iframe adaptive size implementation code_javascript skills

Copy code The code is as follows:

<script> <br>function setHeight(){ <br>var dHeight = document.documentElement.scrollHeight; <br>var t = document.createElement("div"); <br>t.innerHTML = ' <iframe id="kxiframeagent" src="http://rest.kaixin001.com/api/agent.html#' dHeight '"scrolling="yes" height="0px" width="0px">< /iframe>'; <br>document.documentElement.appendChild(t.firstChild); <br>} <br></script>

I was thinking about how to solve the cross-domain problem! Later After searching on the Internet, I suddenly realized

. I copied it as follows and everyone focused on understanding its implementation ideas:


Question:

The page a.htm under domain name A is embedded into the page b.html under domain name B through iframe. Since the size of b.html is unpredictable and will change, the iframe adaptive size in a.htm is required. .

The essence of the problem:

JS cross-domain problem, because in order to control the size of the iframe in a.htm, you must first read the size of b.html, A and B do not belong to the same domain. The access of js is limited and the size of b.html cannot be read.

Solution:

First of all, the premise is A , B is a cooperative relationship, b.html can introduce the js provided by A

First, a.html introduces b.html through iframe

Copy code The code is as follows:

B introduced the js file provided by A in b.html

Html code

Copy code The code is as follows:

The js first reads b .html width and height, then create an iframe, src is the intermediate proxy page a_proxy.html in the same domain as A, set the read width and height into the hash of src

Html code

Copy code The code is as follows:

a_proxy.html is a good intermediate proxy page provided under domain A. It is responsible for reading the width and height values ​​​​in location.hash, and then setting the width and height of the iframe in a.html under the same domain.

Js code

Copy code The code is as follows:

var pParentFrame = parent. parent.document.getElementById("aIframe");
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"].location.hash;
pParentFrame.style.width = locationUrlHash. split("#")[1].split("|")[0] "px";
pParentFrame.style.height = locationUrlHash.split("#")[1].split("|") [1] "px";
var pParentFrame = parent.parent.document.getElementById("aIframe");
var locationUrlHash = parent.parent.frames["aIframe"].frames["iframeProxy"]. location.hash;
pParentFrame.style.width = locationUrlHash.split("#")[1].split("|")[0] "px";
pParentFrame.style.height = locationUrlHash.split ("#")[1].split("|")[1] "px";

In this case, the iframe in a.html will adapt to the width and height of b.html .

Other similar js cross-domain operation problems can also be solved according to this idea