自适应IFrame(IFRAME AutoStretch)

说明:
page_include = 被引用的页面
page_parent = 主页面

解决方法:

方法1
在$page_include加入JS代码

function  AutoStretch_1(frmId)
{
    
var frmObj = null;
    
//如果被引用且提供的父窗口的FRAMEID
    if (parent != null && frmId != null)
        
{
            frmObj 
= parent.document.getElementById(frmId);
        }

            
if (frmObj != null)
    
{    

        
if (frmObj.contentDocument)
        
{//FOREFOX
            frmObj.style.height=document.body.offsetHeight;
        }

        
else (frmObj.Document)
        
{//IE && Opera
            frmObj.style.height = document.body.scrollHeight;
        }

    }

}

该方法有一个BUG,如果$page_include发生无刷新的动态改变,导致$page_include的显示高度变短,opera将显示不正常。

方法2
在$page_parent 端增加JS代码

Iframe自适应高度


< script language = " JavaScript " >  
// ** iframe自动适应页面 **//

// 输入你希望根据页面高度自动调整高度的iframe的名称的列表
//
用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"],可以只有一个窗体,则不用逗号。

// 定义iframe的ID
var  iframeids = [ " content " ]

// 如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏,no表示不隐藏
var  iframehide = " yes "

function  dyniframesize() 
{
var dyniframe=new Array()
for (i=0; i<iframeids.length; i++)
{
        
if (document.getElementById)
{
//自动调整iframe高度
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera)
{
dyniframe[i].style.display
="block"
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight; 
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}

}

//根据设定的参数来处理不支持iframe的浏览器的显示问题
if ((document.all || document.getElementById) && iframehide=="no")
{
var tempobj=document.all? document.all[iframeids[i]] : document.getElementById(iframeids[i])
tempobj.style.display
="block"
}

}

}


if  (window.addEventListener)
window.addEventListener(
" load " , dyniframesize,  false )
else   if  (window.attachEvent)
window.attachEvent(
" onload " , dyniframesize)
else
window.onload
= dyniframesize
</ script >

方法3
支持FIREFOX,IE,OPERA
1. 在$page_include端的最后一行增加一个空白的图片
2. 在$page_include端增加JS代码

function  AutoStretch_2(frmId, lastPicId)
{
    
var frmObj = null;
    
if (parent != null && frmId != null)
        
{
            frmObj 
= parent.document.getElementById(frmId);
        }

    
if (frmObj != null)
    
{    
        frmObj.style.height
=parent.document.getElementById(lastPicId).offsetTop;        
    }

}

getPostion = function(elem)
{
    var offsetTrail 
= elem;
    var offsetLeft 
= 0;
    var offsetTop 
= 0;
    
while (offsetTrail) {
        offsetLeft 
+= offsetTrail.offsetLeft;
        offsetTop 
+= offsetTrail.offsetTop;
        offsetTrail 
= offsetTrail.offsetParent;
    }


    var res 
= {"left":offsetLeft,"top":offsetTop};

    
return res;
    
}
;
getHeight 
=  function(elem)
{
    
if (elem.offsetHeight)
        
{
        
return elem.offsetHeight;
        }

    
else
        
{
        
return elem.scrollHeight;
        }

}
;
getWidth 
=  function(elem)
{
    
if (elem.offsetWidth)
    
{
        
return elem.offsetWidth;
    }

    
else
    
{
        
return elem.scrollWidth;
    }

}
;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值