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

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.