Common skills of iframe in Javascript (Adaptive/cross-origin)

Iframe is unfriendly to search engines. We may not find iframe content in Baidu, but iframe is commonly used. Let's take a look at some examples in js and iframe applications.

Iframe is used by many websites. Although it is convenient for development and maintenance (several pages may call the same iframe at the same time), there are security problems. Embedded in the iframe page, the parent page and child page can easily perform read and write operations in the same domain or cross-subdomain; in the case of completely different domains, you can also change the hash mode for communication. Next I will test the compatibility between data transmission and changes in nine different (Version) browsers.

Content in iframe for read/write operations in the same domain or cross-subdomain

Parent page:

The 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 (){ /* * The following two methods can be used to obtain node content. * Because IE6 and IE7 do not support the contentDocument attribute, a common * Window. frames ["iframe Name"] or window. frames [index] */ Var d = window. frames ["test-iframe" cmd.doc ument; D. getElementsByTagName ('h1 ') [0]. innerHTML = 'pp '; Alert (d. getElementsByTagName ('h1 ') [0]. firstChild. data ); } </Script>

Note: you must use the window. onload method to access the node in iframe. Otherwise, the browser will prompt an error-Access denied. In IE8, Firefox3.6, and Opera11, the node in iframe can also be accessed in DOMReady.

Sub-page read/write operation parent page:

The Code is as follows:	Copy code
<Script> Parent.doc ument. getElementsByTagName ('h1 ') [0]. innerHTML = 'pp '; Alert(parent.doc ument. getElementsByTagName ('h1 ') [0]. firstChild. data ); </Script>

Summary:

• 1 Tests passed IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5.
• 2 obtain the document. getElementById ('Id name'). contentDocument is equal to window. frames ["iframe name" ].doc ument.
• 3 when cross-subdomain, add document. domain = 'xxx. com' to the parent page and subpage JS respectively ';
Cross-origin iframe content

When the domain where two webpages are located is different, to call each other, you can only communicate with each other by changing the hash attribute value of the location object in JS.

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 + = '# '; } Var interval = window. setInterval (function (){ If (location. hash ){ Alert (location. hash ); Window. clearInterval (interval ); } },1000 ); </Script>

Subpage:

The Code is as follows:

Copy code

<H1> RRRRRR <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); // if this annotation is removed, the browser prompts that the user has no permission. Parent. location. href = url + '# B '; Window. clearInterval (interval ); } },500 ); </Script>

Summary:

• 1 IE6, IE7, IE8, Firefox2.0, Firefox3.0, Firefox3.6, Chrome8, Opera11, Safari5, and record all hash changes except IE6 and IE7 in the browser's history.
• 2 I tried to use the parent. location. replace method on the Child page to prevent the parent page from sending a request to the server, so that theoretically the browser would not record the history, but it would not work.
• 2 subpages do not have permission to read the url of the parent page, but can write the url of the parent page. Therefore, you must know the url of the parent page in advance during cross-origin operations.

Iframe adaptive, cross-origin, JS document. domain

Determine whether the subpage's domain is the same as the parent page's domain:

The Code is as follows:	Copy code
Document. domain = parent.doc ument. domain

For more information about iframe adaptive, see the following steps for cross-origin:

1. Add document. domain in the parent window (that is, the window that calls IFRAME)

1 // For example, "a.com" in "www.a.com"

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

 

2. Add the following code in the subwindow (that is, in the IFRAME itself)

The Code is as follows:

Copy code

Function iframeAutoFit () { Try { If (window! = Parent) { Var a = parent.doc ument. getElementsByTagName ("iframe "); For (var I = 0; I <a. length; I ++) { If (a [I]. contentWindow = window) { Var h1 = 0, h2 = 0, d = document, ddd1_d.doc umentElement; 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. For details, add a DIV outside IFRAME. Otherwise, there is a problem in Firefox. Set the width. Otherwise, they all 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 = '20150' scrolling =' no 'height = 'margin px' style = 'margin-top: 15px; '> </iframe> </Div>

OK.

Js pop-up float layer record in the frame/iframe architecture website

Core: Get the bottom-layer DOM object, and then go down to the object [the frame/iframe that wants to bring up the floating layer]. Then the subsequent operations will be the same as those of the non-framework.

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> <Html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en"> <Head> <Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/> <Title> js pop-up floating layer in frame/iframe architecture </title> </Head> <Body> <Frameset rows = "64, *, 64" frameborder = "no" border = "0" framespacing = "0"> <Noframes> <Body> your browser does not support the framework, so you cannot use the system. We recommend that you upgrade your 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> </Html>

For example, in the above page layout, We need to pop up a floating layer in the frame with id as main to display relevant information.

The floating layer JS Code is displayed:

The Code is as follows:

Copy code

Function popShow (){ Var mainFrame = paiyuntop.main.doc ument; Var bkg = mainFrame. getElementById ("pop_bkg"); // gets the transparent background object of the floating layer. If (bkg = null) {// new if it does not exist Bkg = mainFrame. createElement ("div "); Bkg. className = "pop_bkg "; Bkg. id = "pop_bkg "; MainFrame. body. appendChild (bkg ); } Var pop_div = mainFrame. getElementById ("pop_addr_div"); // gets the Div object that displays information. If (pop_div = null) {// new if it does not exist 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 "; }

In this way, a floating layer will pop up normally.