Using location.hash to achieve cross-domain iframe adaptation_javascript skills

Page domain relationship:

Main page a.html belongs to domain A: www.jb51.net
Iframed page b.html belongs to domain B: www.baidu .com, assuming address: http://www.baidu.com/b.html

Achievement effect:

Page a.html under A domain name is passed The iframe is embedded in the page b.html under the B domain name. Since the width and height of b.html are unpredictable and can change, the iframe in a.html needs to be adaptively resized.

The essence of the problem :

js has a problem with cross-domain iframe access, because in order to control the height and width of the iframe in a.html, you must first read the size of b.html, and A and B do not belong to the same domain. For security reasons, browsers restrict js cross-domain access and cannot read the height and width of b.html.

Solution:

introduction The proxy pages c.html and a.html belong to the same domain A. c.html is a good intermediate proxy page provided under domain A. Assume that the address of c.html is: www.jb51.net/c.html, which is responsible for reading The width and height values ​​in location.hash are then set to the width and height of the iframe in a.html in the same domain as it.

The code is as follows:

a.html code

First, b.html is introduced through iframe in a.html

Copy the code The code is as follows:

b.html code

Copy code The code is as follows:

The iframe in a.html can be adapted to the width and height of b.html.

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

If it is not cross-domain access, you can refer to this article. A summary of various methods for iframe adaptive height