JavaScript common techniques for IFRAME collation (Adaptive/Cross-domain)

IFRAME Many sites are in use, although convenient development and maintenance (may also have several pages call the same IFRAME), but there are security issues. Embedded in the IFRAME page, both the parent page and the subpage can be easily read and write in the same domain or across subdomains, and in the case of a completely different domain, you can also communicate by changing the hash. I am following the compatibility test for data transfer and change in nine different (version) browsers.

Read-write operations in the same domain or across subdomains the contents of the IFRAME

Parent page Reads and writes the child page:

code is as follows

copy code

<iframe id=" Test-iframe "name=" Test-iframe "src=" child.html "" scrolling= " No "frameborder=" 0 ></iframe> <script> Window.onload = function () {  /*  & nbsp *  the following two ways to get the contents of a node.    *  because of IE6, IE7 does not support contentdocument properties, so here is a generic    *  window.frames["iframe Nam E "] or Window.frames[index]    */   var d = window.frames[" Test-iframe "].document;   d.ge Telementsbytagname (' H1 ') [0].innerhtml = ' PP ';   Alert (d.getelementsbytagname (' H1 ') [0].firstchild.data); } </script>

Note: Be sure to access the nodes in the IFRAME through the Window.onload method, or the browser will prompt for an error-deny access. Nodes in the IFRAME can also be accessed at Domready under IE8, Firefox3.6, Opera11.

Child page Read and write Operation parent page:

The code is as follows	Copy Code
<script> Parent.document.getElementsByTagName (' H1 ') [0].innerhtml = ' PP '; Alert (Parent.document.getElementsByTagName (' H1 ') [0].firstchild.data); </script>

Summary:

• 1 tests via IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5.
• 2 Lookup data to obtain document.getElementById (' ID name '). Contentdocument is equal to window.frames["iframe name"].document.
• 3 cross-domain, you need to be in the parent page and sub-page JS, respectively, plus document.domain = ' xxx.com ';
Cross-domain operation in IFRAME content

When two Web pages are not in the same domain, to realize the data call each other, only through JS to change the value of the hash property of location objects to communicate with each other.

Parent page:

The code is as follows

Copy Code

<iframe id= "Test-iframe" src= "http://www.yyy.com/child.html" scrolling= "no" frameborder= "0" ></iframe> <input type= "button" value= "Send" onclick= "SendRequest ()"/> <script> function SendRequest () { document.getElementById (' test-iframe '). src = ' #a '; } var interval = window.setinterval (function () { if (Location.hash) { alert (Location.hash); Window.clearinterval (interval); } },1000); </script>

Sub page:

code is as follows

copy code

<script> var url = ' http://www.xxx.com/father.html ';     Oldhash = Self.location.hash,     newhash,     interval = Window.setinterval ( function () {         newhash = self.location.hash;          if (Oldhash!= self.location.hash) {         document.getElementsByTagName (' H1 ') [0].innerhtml = ' PP ';        //alert (parent.location.href);//Remove this comment, the browser will prompt for no permissions          parent.location.href = URL + ' #b ';           Window.clearinterval (interval);        }    },500); </script>

Summary:

• 1 tested IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, OPERA11, Safari5, except IE6, IE7, as long as you change the hash will be recorded in the browser histor In Y.
2 I have tried to use the Parent.location.replace method to prevent the parent page from sending a request to the server to jump, so that the theory browser will not record history, but failed to work.
• 2 child pages do not have permission to read the URL of the parent page, but you can write the URL of the parent page, so you should know the URL of the parent page in advance when you are working across the domain

iframe Adaptive, cross domain, JS document.domain

Determines whether the child page's domain is the same as the parent page's domain:

The code is as follows	Copy Code
Document.domain = = Parent.document.domain

For the adaptive adaptation of IFrame, you can refer to the following steps in a cross-domain domain:

1. Add Document.domain to the parent window (that is, the window that calls the IFRAME)

1//such as "www.a.com" in the "a.com"

The code is as follows	Copy Code
Document.domain = "A.com";

2. Add the following code to the child window (i.e. the IFRAME itself)

The code is as follows

Copy Code

function Iframeautofit () { Try { if (window!=parent) { var a = Parent.document.getElementsByTagName ("iframe"); for (var i=0; i<a.length; i++) { if (A[i].contentwindow==window) { var h1=0, h2=0, D=document, ddd=d.documentelement; A[i].parentnode.style.height = a[i].offsetheight + "px"; A[i].style.height = "10px"; if (dd && dd.scrollheight) h1=dd.scrollheight; if (d.body) h2=d.body.scrollheight; var H=math.max (H1, H2); if (document.all) {h = 4;} if (window.opera) {h = 1;} A[i].style.height = A[i].parentnode.style.height = h + "px"; } } } } catch (ex) {} } if (window.attachevent) { Window.attachevent ("onload", Iframeautofit); }else if (Window.addeventlistener) { Window.addeventlistener (' Load ', Iframeautofit, false); }

3. Details problem an iframe with a div outside, otherwise Firefox has a problem, the width is set up otherwise they have problems

The code is as follows	Copy Code
<div style= "width:100%;margin:0 0 10px 0; " > <iframe align= ' middle ' src= ' http://comments.cnmo.com/iframe_comment.php?kindid=9&articleid=<?= $pic _id? >&tw=620&style=11&font_num=180&pagesize=3 ' frameborder= ' 0 ' marginwidth= ' 0 ' marginheight= ' 0 ' Width= ' 100% ' scrolling= ' no ' height= ' 450px ' style= ' margin-top:15px; ' ></iframe> </div>

OK, okay.

frame/iframe The Web site of the architecture JS pop-up floating layer record

Core: Get the object at the bottom of the DOM, and then go down to the object [the Frame/iframe that wants to pop the floating layer], and then do the same thing as the non frame.

HTML code:

The code is as follows

Copy Code

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 strict//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" > <meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/> <title>frame/iframe Architecture in JS pop-up floating layer </title> <body> <frameset rows= "64,*,64" frameborder= "no" border= "0" framespacing= "0" > <noframes> <body> your browser does not support the framework, so it is not possible to use this system, it is recommended that you upgrade the browser version or use other browsers. </body> </noframes> <frame src= "header.html" name= "Headerframe" noresize= "noresize" frameborder= "no" scrolling= "no" marginwidth= "0" marginheight= "0" target= "main"/> <frameset cols= "200,*" id= "Frame" > <frame src= "left.html" name= "Leftframe" noresize= "noresize" marginwidth= "0" marginheight= "0" frameborder= "0" Scrolling= "No" target= "main"/> <frame src= "right.html" name= "main" marginwidth= "0" marginheight= "0" frameborder= "0" scrolling= "Auto" target= "_ Self "/> </frameset> <frame src= "footer.html" name= "Footerframe" noresize= "noresize" frameborder= "no" scrolling= "no" marginwidth= "0" marginheight= "0" target= "main"/> </frameset> </body>

As the top page layout, we will pop a floating layer in the frame with ID main to show the relevant information.

Pop-up floating layer JS code:

The code is as follows

Copy Code

function Popshow () {     var mainFrame = window.top.main.document;  & nbsp;  var bkg = Mainframe.getelementbyid ("pop_bkg"); Gets the transparent background object of the floating layer     if (bkg==null) {//does not exist the new     bkg = Mainframe.createelement (" Div ");     bkg.classname = "pop_bkg";     bkg.id = "pop_bkg";     MainFrame.body.appendChild (bkg);    }     var pop_div = Mainframe.getelementbyid ("Pop_addr_div");//Get the Div object that displays the information      if (Pop_div = null) {//does not exist, new     pop_div = mainframe.createelement ("Pop_addr_div");     pop_div.id = "Pop_addr_div";     MainFrame.body.appendChild (pop_div);    }     bkg.style.display = "block";     pop_div.style.display = "block";    }

This will allow a floating layer to pop up normally.