Home>Web design tutorial>WEB standardization

IFRAME framework page to implement adaptive high solution

Author：Eve Cole Update Time：2025-02-05 14:05:58

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:


  1. <mce: script type = "text/javascript" > <!-

  2. ( Function () {)

  3. /**

  4. * Get the current domain

  5. **/

  6. Function _getDomain () {

  7. var _hostname = window.location.hostname.tostring ();

  8. var _hosts = _hostname.split ( "." );

  9. var _len = _hosts.Length;

  10. if (_len> 2) {{

  11. Return _Hosts [_Len-2] + "." + _hosts [_Len-1];

  12. }

  13. Return_hostname ;

  14. }

  15. document.ndsain = _getDomain ();

  16. }) ();

  17. // -> </mce: script>

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>

Related Articles