Cross-domain iframe highly adaptive (Ie/ff/op/chrome compatible)

The use of JavaScript to control the height of the IFRAME element is the key to the iframe height adaptation, and because JavaScript controls the permissions under different domain names, it causes the same domain and cross-domain situation.

Because the client JS uses the browser's same-origin security policy, cross-domain cases, nested pages if you want to get and modify the DOM property of the parent page, there will be insufficient permissions, prompt error: Permission denied to access property ' document '. This is because the same-origin policy prohibits client script from linking to any other host or accessing data from any other host other than the host that contains the script's loaded document. This means that JavaScript code that accesses a Web service is usually useful only if it also resides on the same server as the Web service itself.

So in a cross-domain scenario, the problem is that the parent window cannot get the height of the nested page, and the nested page cannot modify the properties of the parent window DOM node through JS residing on its server. So we need a medium to get the height of the nested page and to modify the height of the IFRAME node in the main interface.

IDEA: The existing main interface main is under Domain A, nested page b under domain B, nested page B and nested a mediation page a under Domain A. When a user opens a browser to access mail.html, loading B, triggering the onload event of B gets its own height, then B loads a and assigns the height value to the location object of a as a parameter. So a can get the height of B through Location.hash. (Location is the built-in object that manages the address bar inside JavaScript, such as location.href to manage the URL of the page, and Location.href=url to redirect the page directly to the URL.) Location.hash can then be used to get or set the label value of the page. such as http://domain/#admin的location. hash= "#admin". Use this attribute value to do something very meaningful. ）。 Because the A and main pages are in the same domain, the DOM node properties of main can be modified to achieve our goal of setting the IFRAME label height.

　　

Key code:

IFRAME Main Page: main.html

<iframe id= "Iframeb"  name= "Iframeb" src= "www.b.com/B.html" width= "100%" height= "Auto" scrolling= "no" Frameborder= "0" ></iframe>

IFrame Nesting page: b.html

<iframe id= "Iframea" name= "Iframea" src= "" width= "0" height= "0" style= "display:none;" ></iframe>< Script type= "Text/javascript" >function Sethash () {    hashh = document.documentElement.scrollHeight;//get its own height    URLC = "www.a.com/A.html";//Set Iframea src    document.getElementById ("Iframea"). src=urlc+ "#" +HASHH;// Passing the height as a parameter}window.onload=sethash;</script>

Mediation Page: a.html

<script>function  Pseth () {    var iObj = parent.parent.document.getElementById (' Iframeb ');//a and main are the same domain, So you can access    the node Iobjh = parent.parent.frames["Iframeb"].frames["Iframea"].location.hash;//access your location object to get the hash value    iObj.style.height = Iobjh.split ("#") [1]+ "px";//Operation Dom}pseth ();</script>

In the same domain, it is possible to get its own height directly in the nested page B and manipulate the DOM property of its parent window main.

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
　　
Cross-domain iframe highly adaptive (Ie/ff/op/chrome compatible)