site topic网站专题
首页
>
网站专题
>
专题详情
分享新闻到:

iframe框架页面实现自适应高度解决方案

互诺科技:2010-01-06 09:42     阅读数:       标签:

经常会有父页面需要通过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>

编辑整理