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
Adding background image control to a component re...
Table of contents 1. Ternary operator judgment 2....
question Question 1: How to solve the performance...
This article example shares the specific code of ...
MySQL 8.0 for Windows v8.0.11 official free versi...
The questions encountered in Baidu interviews nee...
This article installs Google Input Method. In fac...
The LIKE operator is used in the WHERE clause to ...
Use div to create a mask or simulate a pop-up wind...
This article shares the specific code of canvas t...
Previously, https://www.jb51.net/article/205922.h...
[LeetCode] 180. Consecutive Numbers Write a SQL q...
XPath is a language for selecting parts of XML do...
First, you can open Moments and observe several l...
You can use the ps command. It can display releva...