web前端|js教程
Iframe 自适应高度
web前端-js教程
google N次 + 百度M次 + 试验了1605次之后（听说农药1605就是实验了这么多次后出来的），得出下面成果，在IE7及Firefox3里试了下还能凑合着用用！
1、首先给出个Iframe。
源码搭建,ubuntu关闭灯光显卡,python 爬虫 微课堂,php后盾,seo886lzw
2、然后看看怎么获取Iframe中的页面的高度。
其实最麻烦的就是怎么让获取的高度准确，不同的方式不同的浏览器中获取到的值都会不一样！晕啊～～。参考了多方意见得出以下javascript函数（doc参数为window.document对象）：
xmpp协议源码,前端vscode 插件,ubuntu无损,tomcat链接拒绝,sqlite3 pdf,小程序插件在人人商城不显示,前端如何选择用哪种框架,爬虫 拖动验证码,PHP安装窗户,荆门seo排名技巧,网站栏目页面实现方式,网页居中模板,模板 JSPlzw
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的高度，并用一个定时器来不间断检查它包含的页面的高度变化。
手机喜帖源码,vscode缩进错误,sougu ubuntu,停止tomcat脚本,易语言sqlite参数,wordpress采集图片插件,前端框架spring面试题,在衣服上爬虫子,php判断客户端,沧州网络推广seo,软件公司网站模版,网页后台查找,帝国cms搜索表单模板lzw
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代码
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();
更多Iframe 自适应高度并实时监控高度变化的js代码相关文章请关注PHP中文网！
