Iframe自适应高度并实时监控高度变化的js代码
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Iframe自适应高度并实时监控高度变化的js代码,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含3893字,纯文字阅读大概需要6分钟。
内容图文
![Iframe自适应高度并实时监控高度变化的js代码](/upload/InfoBanner/zyjiaocheng/304/da4ab61f20264f1d9783c5f4a116e79c.jpg)
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中文网!
内容总结
以上是互联网集市为您收集整理的Iframe自适应高度并实时监控高度变化的js代码全部内容,希望文章能够帮你解决Iframe自适应高度并实时监控高度变化的js代码所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。