.net iframe 自适应高度JS代码
发布网友
发布时间：2022-05-16 06:02
共3个回答
懂视网
时间：2022-05-16 10:23
1、首先给出个Iframe。
<iframe id="ifrm" marginheight="0" marginwidth="0" height="100" width="1000" frameborder="0" scrolling="no" src="xxxxx.html"> </iframe>
2、然后看看怎么获取Iframe中的页面的高度。
其实最麻烦的就是怎么让获取的高度准确，不同的方式不同的浏览器中获取到的值都会不一样！晕啊～～。参考了多方意见得出以下javascript函数（doc参数为window.document对象）：
function getDocHeight(doc)
{
//在IE中doc.body.scrollHeight的可信度最高
//在Firefox中，doc.height就可以了
var docHei = 0;
var scrollHei;//scrollHeight
var offsetHei;//offsetHeight，包含了边框的高度
if (doc.height)
{
//Firefox支持此属性，IE不支持
docHei = doc.height;
}
else if (doc.body)
{
//在IE中，只有body.scrollHeight是与当前页面的高度一致的，
//其他的跳转几次后就会变的混乱，不知道是依照什么取的值！
//似乎跟包含它的窗口的大小变化有关
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;
}
else if(doc.documentElement)
{
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;
}
/*
docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！
*/
return docHei;
}3、最后修改Iframe的高度，并用一个定时器来不间断检查它包含的页面的高度变化。
function doReSize()
{
var iframeWin = window.frames['ifrm'];
var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: null;
if ( iframeEl && iframeWin )
{
var docHei = getDocHeight(iframeWin.document);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
else if(iframeEl)
{
var docHei = getDocHeight(iframeEl.contentDocument);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
}
function runResizeTask()
{
doReSize();
setTimeout("runResizeTask()",500);//每隔半秒执行一次
}
runResizeTask();在这里就没有去考虑被包含的页面中是否有折叠、隐藏/展现的情况了！
完整js代码
<script language="javascript" type="text/javascript">
function getDocHeight(doc){
//在IE中doc.body.scrollHeight的可信度最高
//在Firefox中，doc.height就可以了
var docHei = 0;
var scrollHei;//scrollHeight
var offsetHei;//offsetHeight，包含了边框的高度
if (doc.height){
//Firefox支持此属性，IE不支持
docHei = doc.height;
}
else if (doc.body){
//在IE中，只有body.scrollHeight是与当前页面的高度一致的，
//其他的跳转几次后就会变的混乱，不知道是依照什么取的值！
//似乎跟包含它的窗口的大小变化有关
if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetHeight;
if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollHeight;
}
else if(doc.documentElement){
if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetHeight;
if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollHeight;
}
/*
docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！
*/
return docHei;
}
function doReSize(){
var iframeWin = window.frames['Main'];
var iframeEl = window.document.getElementById? window.document.getElementById('Main'): document.all? document.all['Main']: null;
if ( iframeEl && iframeWin ){
var docHei = getDocHeight(iframeWin.document);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
else if(iframeEl){
var docHei = getDocHeight(iframeEl.contentDocument);
if (docHei != iframeEl.style.height) iframeEl.style.height = docHei + 'px';
}
}
function runResizeTask(){
doReSize();
setTimeout("runResizeTask()",1000);//每隔1秒执行一次
}
runResizeTask();
</script>更多Iframe 自适应高度并实时监控高度变化的js代码相关文章请关注PHP中文网！
热心网友
时间：2022-05-16 07:31
var winHeight = 0;
function findDimensions() // 函数：获取尺寸
{
// 获取窗口宽度
if (window.innerWidth)
winWidth = window.innerWidth;
else if ((document.body) && (document.body.clientWidth))
winWidth = document.body.clientWidth;
// 获取窗口高度
if (window.innerHeight)
winHeight = window.innerHeight;
else if ((document.body) && (document.body.clientHeight))
winHeight = document.body.clientHeight;
// 通过深入 Document 内部对 body 进行检测，获取窗口大小
if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
winHeight = document.documentElement.clientHeight;
winWidth = document.documentElement.clientWidth;
}
// 结果
var body = document.documentElement.scrollHeight;
var height = winHeight - 140;//窗体高度减去固定的高度
document.getElementById("frmain").style.height = height + "px";//给iframe定义高度，会适应屏幕的大小，并跟随浏览器的最小化与最大化改变。
}
function switchSysBar() {
var src = document.all("frameshow").style.backgroundImage;
var bl = document.all('frmTitle').style.display;
if (bl == "") {
document.all("frameshow").style.background = "url(img/right.png) no-repeat center center";
document.all('frmTitle').style.display = "none"
}
else {
document.all("frameshow").style.background = "url(img/left.png) no-repeat center center";
document.all('frmTitle').style.display = ""
}
}
findDimensions();
// 调用函数，获取数值
window.onresize = findDimensions;
//将此js脚本放到页面的最下边。追问frmain、iframepage 与frmTitle分是个的ID啊啊???
追答直接看前台布局<div id="top" style="height: 70px; ">
<table>
div id="content">
<table style="height: 100%;" cellpadding="0" cellspacing="0"><tr>
<td style="width: 200px; " valign="top" id="frmTitle">
<table style="height: 100%;">
<tr> <td style="height: 32px;"></td></tr><tr><td></td></tr></table>
</td><td><table style="height: 100%;"><tr>
<td style="height: 6px;></td></tr><tr><td style="height: 23px; width: 100%; float: left;"><div style="height: 100%; width: 30px; float: left;">
<div id="frameshow" style="height: 100%; width: 20px; float: left;"></div></div>
<div style="float: left; height: 23px;"></div></td> </tr><tr><td>
<asp:Panel ID="txt" runat="server">
<iframe id="frmain" style="width: 100%;" marginwidth="0" marginheight="0" frameborder="0"
src=""></iframe> </asp:Panel></td> </tr></table></td></tr></table> </div>
<div id="foot" style="height: 30px;"></div>
热心网友
时间：2022-05-16 08:49
