Home>Web design tutorial>WEB standardization

iframe frame page implementation adaptive height solution

Author：Eve Cole Update Time：2010-01-06 17:05:40

Often a parent page needs to embed another subpage through an iframe, and the height of the iframe in the parent page must be adjusted in a timely manner according to the height of the subpage, which requires that the page must have an adaptive function. The adaptive idea is relatively simple: the height of the iframe in the parent page must be adjusted in time according to the height of the child page. Since js operations are involved, the adaptive solutions for 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 embeds www.chinaz.com/xxx.html page

1.0 Key code in http://jipiao.taobao.com/index.htm

<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>

Add the following JS to the page:

<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. Embed the following code in the sub-page http://www.chinaz.com/xxx.htm. That’s it


<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 subpage
document.domain=_getDomain();
function_setHeight()
{
if (window.parent != window)
{
try
{
//Set the height of the parent iframe
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
}
catch(e)
{
}
}
//Set every 2s, mainly to be compatible with height changes after the subpage is loaded.
setTimeout(_setHeight,2000);
}
//Called once after the subpage is loaded
_setHeight();
}
})();
// --></mce:script>

Different parent pages, such as www.chinaz.com, book.chinaz.com have completely different domain names. The solution is to use a proxy page www.chinaz.com/proxy.htm www.chinaz.com/index.htm page to embed the book .chinaz.com/xxxx.htm, and xxx.htm needs to hide and embed www.chinaz.com/proxy.htm as a proxy. You can write the height at the end www.chinaz.com/proxy.htm#500 , which means 500px height. .

1. Key code in www.chinaz.com/index.htm page:


<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 the following 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.domain = _getDomain();
  16. })();
  17. // --></mce:script>

2. Key codes 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" mce_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 codes in the proxy page book.chinaz.com/proxy.htm are as follows:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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 el = window.top.document.getElementById('J_selfAdapting');
if(el) {
el.style.height = height + 'px';
}
}
catch (e) {}
})();
// --></mce:script>
</body>
</html>

Related Articles