WEB2.0 web20
当前位置:首页 > 网站建设专题 > WEB2.0
iframe框架页面实现自适应高度解决方案
发布日期:2010-01-06 阅读次数:361 字体大小:

经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度,这就要求 页面必须具有自适应功能。自适应思想比较简单:就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作,因此对于不同域名的自适应解决方案有所不同,主要是在解决跨域问题。

对于同父级域名下的自适应高度:www.chinaz.com/index.html 页面中嵌入www.chinaz.com/xxx.html页面

 

1.0   http://jipiao.taobao.com/index.htm中关键代码

<iframe id="J_selfAdapting" src=http://www.chinaz.com/Design/Rules/"http://www.chinaz.com/xxx.htm" mce_src="http://www.chinaz.com/xxx.htm" frameborder="0" scrolling="no" style="height:0;"></iframe>

页面增加如下JS:

<mce:script type="text/javascript"><!--
(function(){
/**
* 获取当前域
**/
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>

编辑整理