Page domain relationship: The main page a.html belongs to domain A: www.jb51.net The iframed page b.html belongs to domain B: www.jb51.cn, assuming the address is: http://www.jb51.cn/b.html Result: The page a.html under the domain name A embeds the page b.html under the domain name B through an iframe. Since the width and height of b.html are unpredictable and will change, the iframe in a.html needs to adapt to the size. The nature of the problem: js has a problem with cross-domain iframe access. To control the height and width of the iframe in a.html, you must first read the size of b.html. A and B do not belong to the same domain. For security reasons, the browser restricts js's cross-domain access and cannot read the height and width of b.html. Solution: Introduce proxy page c.html and a.html belong to the same domain A. c.html is an intermediate proxy page provided by domain A. Assume the address of c.html is: www.jb51.net/c.html. It is responsible for reading the values of width and height in location.hash, and then setting the width and height of the iframe in a.html under the same domain. The code is as follows: a.html code First, a.html introduces b.html through iframe <iframe id=”b_iframe” height=”0″ width=”0″ src=”http://www.jb51.cn/b.html” frameborder=”no” border=”0px” marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes” ></iframe> b.html code Copy code The code is as follows:<script type=”text/javascript”> var b_width = Math.max(document.documentElement.clientWidth,document.body.clientWidth); var b_height = Math.max(document.documentElement.clientHeight,document.body.clientHeight); var c_iframe = document.getElementById("c_iframe"); c_iframe.src = c_iframe.src+”#”+b_width+”|”+b_height; //https://www.jb51.net/c.html#width|height” } </script> <!--js reads the width and height of b.html, and sets the read width and height to the hash of the src of c.html, the intermediate proxy page in the same domain as a.html--> <iframe id=”c_iframe” height=”0″ width=”0″ src=”https://www.jb51.net/c.html” style=”display:none” ></iframe> c.html code Copy code The code is as follows:<script type=”text/javascript”> var b_iframe = parent.parent.document.getElementById("b_iframe"); var hash_url = window.location.hash; var hash_width = hash_url.split("#")[1].split("|")[0]+"px"; var hash_height = hash_url.split("#")[1].split("|")[1]+"px"; b_iframe.style.width = hash_width; b_iframe.style.height = hash_height; </script> The iframe in a.html can adapt to the width and height of b.html. Other similar js cross-domain operation problems can also be solved in this way. |
<<: A brief discussion on CSS3 animation jamming solutions
>>: 1 minute Vue implements right-click menu
Carousel The main idea is: In the large container...
Table of contents Ref and Reactive Ref Reactive T...
1. It is best to add a sentence like this before t...
BMP is an image file format that is independent o...
1. Connect Centos7 under VMware and set a fixed I...
Preface: MYSQL should be the most popular WEB bac...
Samba Overview Samba is a free software that impl...
Table of contents Problem Description Scenario In...
First, the principle of esp8266 publishes message...
Table of contents Add code to the Tree item; 1. S...
In many cases, large and medium-sized websites wi...
The problem is as follows: I entered the command ...
This article shares the specific code of JavaScri...
The previous articles were all my own learning lo...
Table of contents Scenario Task idea analyze Conc...