Home > Web Front-end > JS Tutorial > js cross-domain problem cross-domain iframe adaptive size implementation code_javascript skills

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

WBOY
Release: 2016-05-16 18:22:59
Original
1311 people have browsed it
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
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template