iframe adaptive size

The domain a.html belongs to the main page a: www.taobao.com

The domain b to which the iframed page b.html belongs: www.alimama.com, assuming address: http://www.alimama.com/b.html

The page under the a domain name a.html is embedded in the page b.html under the b domain name b through an iframe. Since the width and height of b.html are unpredictable and will change, the adaptive size of the iframe in a.html is required.

The problem of js' cross-domain iframe access, because 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 cross-domain access to js and cannot read the height and width of b.html.

The proxy proxy page c.html belongs to the same domain a and a.html. c.html is an intermediate proxy page provided under the a domain a. Assume that the address of c.html is: www.taobao.com/c.html, which 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 as it.

a.html code

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

<iframe id=b_iframe height=0′ width=0′ src=http://www.alimama.com/b.html frameborder=no border=0px marginwidth=0′ marginheight=0′ scrolling=no allowtransparency=yes ></iframe>

b.html code

<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; //http://www.taobao.com/c.html#width|height

}

</script>

<!-js reads the width and height of b.html, and sets the width and height of read to the middle proxy page of c.html in the same domain, and sets the width and height of the read to the hash of the src of c.html->

<iframe id=c_iframe height=0′ width=0′ src=http://www.taobao.com/c.html style=display:none ></iframe>

c.html code

<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.

Some other cross-domain operation problems similar to JS can also be solved according to this idea