There are often parent pages that need to be embedded in another subpage through iframe, and adjust the height of iframe in the parent page in a timely manner based on the height of the child page. This requires the page to have adaptive functions. The adaptive idea is relatively simple: the iframe height in the parent page must be adjusted according to the height of the child page in a timely manner. Since JS operations are involved, the adaptive solutions of different domain names are different, mainly to solve cross -domain problems.
For adaptive height under the same parent domain name: www.chinaz.com/index.html page embedded in www.chinaz.com/xxx.html page
1.0 http://jipiao.taobao.com/index.htm key code
| <iframe id="J_selfAdapting" src="http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.com/xxx.htm" frameborder="0" scrolling="no "STYLE =" Height: 0; "> </iframe> |
The page is added as follows JS:
| <mce: script type = "text/javascript"> <!- (function(){ /** * Get the current domain **/ Function _getDomain () { var _hostname = window.location.hostname.tostring (); var _hosts = _hostname.split("."); var _len = _hosts.length; if (_len> 2) {{ Return _Hosts [_Len-2]+"."+_Hosts [_Len-1]; } return _hostname; } document.domain = _getDomain(); }) (); // -> </mce: script> |
2. The following code is embedded in the sub -page http://www.chinaz.com/xxx.htm. To
<mce: script type = "text/javascript"> <!- (Function () {) /** * Get the current domain **/ function _getDomain(){ var _hostname = window.location.hostname.tostring (); var _hosts = _hostname.split ("."); var _len = _hosts.length; if(_len>2){ Return _Hosts [_Len-2]+"."+_Hosts [_Len-1]; } Return_hostname; } Window.Onload = function () () {{ // Set the domain of the child page document.ndsain = _getDomain (); function _setHeight() {{ if (window.parent != window) {{ try {{ // Set the height of the parent -level iframe parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px'; } catch (e) {{ } } // Set up every 2S, mainly to change the height after the loading of the Page Page settimeout (_Setheight, 2000); } // After loading the sub -page, call it once _Setheight (); } }) (); // --></mce:script> |
Different parent -level pages, such as www.chinaz.com, book.chinaz.com Domain name is completely different. The solution is to use a proxy page www.chinaz.com/proxy.htm www.chinaz.com/index.htm. .chinaz.com/xxxx.htm, and xxx.htm needs to hide www.chinaz.com/proxy.htm as an agent. Essence 1. Key code on the key code in www.chinaz.com/index.htm:
<iframe id = "j_Selfadapting" src = "http://www.chinaz.com/xxxx.htm" mce_src = "http://www.chinaz.com/xxxx.htm" frameBorder = "0" scrolling = " NO " style="height:0;"></iframe> |
Add as follows JS:
|
2. key code in www.chinaz.com/xxxx.htm:
<iframe scrolling = "no" frameborder = "0" style = "display: none;" mce_style = "display: none;" src = "http://www.chinaz.com/proxy.htm#597" src = " http://www.chinaz.com/proxy.htm#597 "id =" taobaoiframe "> </iframe> |
<mce: script type = "text/javascript"> <!- (function(){ var pageheight = document.body.scrollheight; document.GetelementByid ('Taobaoiframe'). SRC = 'http://www.chinaz.com/proxy.htm#' + Pageheight; }) (); // -> </mce: script> |
3. All code in the proxy page book.chinaz.com/proxy.htm is as follows: as follows:
<! Doctype HTML PUBLIC "-// W3C // DTD XHTML 1.0 Transitional // EN" http://www.w3.org/xhtml1/dtddml1-transitationAl.dtd "> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text /html; charset = gbk" /> </head> <body> <mce:script type="text/javascript"><!-- (function(){ /** * Get the current domain **/ Function _getDomain () { var _hostname = window.location.hostname.toString(); var _hosts = _hostname.split ("."); var _len = _hosts.Length; if (_len> 2) {{ Return _Hosts [_Len-2]+"."+_Hosts [_Len-1]; } Return_hostname; } document.domain = _getDomain(); var height = window.location.hash.substring (1); try{ var = window.top.document.GetelementByid ('J_SELFADAPTING'); if (el) {{ el.style.head = height + 'px'; } } catch (e) {} }) (); // -> </mce: script> </body> </html> |