|
|
经常会有父页面需要通过iframe嵌入另一个子页面,又要适时根据子页面的高度调整父页面中iframe的高度，这就要求 页面必须具有自适应功能。自适应思想比较简单：就是父页面中iframe高度必须要适时根据子页面 高度进行调整。 由于涉及到js操作，因此对于不同域名的自适应解决方案有所不同，主要是在解决跨域问题。
![]()
对于同父级域名下的自适应高度：www.tzlink.com/index.html 页面中嵌入www.tzlink.com/xxx.html页面
1.0 http://jipiao.taobao.com/index.htm中关键代码
<iframe id="J_selfAdapting" src="http://www.tzlink.com/xxx.htm" mce_src="http://www.tzlink.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>
2.子页面http://www.tzlink.com/xxx.htm 中嵌入如下代码。即可
<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;
}
window.onload = function()
{
//设置子页面的域
document.domain=_getDomain();
function _setHeight()
{
if (window.parent != window)
{
try
{
//设置父级iframe的高度
parent.document.getElementById("J_selfAdapting").style.height = document.body.scrollHeight+ 'px';
}
catch(e)
{
}
}
//每隔2s设置一次，主要为了兼容子页面加载完毕之后高度再变化
setTimeout(_setHeight,2000);
}
//子页面加载完毕之后调用一次
_setHeight();
}
})();
// --></mce:script>
[ 本帖最后由 tzlink 于 2010-1-6 14:19 编辑 ] |
|
IP卡
狗仔卡
发表于 2010-1-6 14:18:14
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
转播
分享
淘帖
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
楼主
