自动设置iframe高度，实现iframe高度自适应 - ThinkPHP框架
自动设置iframe高度，供第三方调用，实现iframe高度自适应；
这个可以解决跨域问题。iframe 如下&iframe&id=&showFrame&&src=&{:C('AuditResource')}&&width=&100%&&height=&620&&border=&0&&frameborder=&0&&&/iframe&iframe 的src地址包含如下代码片段：&iframe&width=&0&&height=&0&&style=&display:&&&src=&http://domain/setIframeHeight？#300&&name=&iframeA&&id=&iframeA&&&/iframe&
&&script&type=&text/javascript&&
&&&&&&&&try&{
&&&&&&&&&&&&function&sethash()&{
&&&&&&&&&&&&&&&&var&hashH&=&document.documentElement.scrollH
&&&&&&&&&&&&&&&&var&urlC&=&&http://domain/setheight.html&;
&&&&&&&&&&&&&&&&document.getElementById(&iframeA&).src&=&urlC&+&&#&&+&hashH&+&&#&&+&Math.random();
&&&&&&&&&&&&}
&&&&&&&&}&catch&(e)&{&}
&&&&&/script&http://domain/setIframeHeight 的代码如下：&&&&/**
&&&&&*自动设置iframe高度，供第三方调用，实现iframe高度自适应
&&&&public&function&setIframeHeight()&{
&&&&&&&&header(&Content-type:&text/&charset=utf-8&);&
&&&&&&&&echo&'&meta&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&/&';
&&&&&&&&echo&'&script&type=&text/javascript&&
&&&&&&&&&&&&var&b_iframe&=&parent.parent.document.getElementById(&showFrame&);
&&&&&&&&&&&&//var&app_show_left&=&parent.parent.document.getElementById(&aside_left&);
&&&&&&&&&&&&var&hash_url&=&window.location.
&&&&&&&&&&&&var&hash_width&=&hash_url.split(&#&)[1].split(&|&)[0];
&&&&&&&&&&&&var&hash_height&=&hash_url.split(&#&)[1].split(&|&)[1];
&&&&&&&&&&&&if(undefined==hash_height)&{
&&&&&&&&&&&&&&&&hash_height&=&hash_
&&&&&&&&&&&&&&&&hash_width&=&0;
&&&&&&&&&&&&}
&&&&&&&&&&&&//b_iframe.style.width&=&hash_
&&&&&&&&&&&&b_iframe.style.height&=&hash_height+&px&;
&&&&&&&&&&&&&/script&';
积分：3299
ThinkPHP 是一个免费开源的，快速、简单的面向对象的 轻量级PHP开发框架 ，创立于2006年初，遵循Apache2开源协议发布，是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，也注重易用性。并且拥有众多的原创功能和特性，在社区团队的积极参与下，在易用性、扩展性和性能方面不断优化和改进，已经成长为国内最领先和最具影响力的WEB应用开发框架，众多的典型案例确保可以稳定用于商业以及门户级的开发。可以让iframe框架 自适应大小的js代码，自动改变高度和宽度
其他技术问题
很多时候我们用iframe的时候因为想载入很多种网页，大小很不好控制，所以在网上找了这个代码，希望能帮到大家！代码如下：html代码：&iframe id=&frame_content& src=&/gftool/index.html& scrolling=&no& frameborder=&0& onload=&this.height=100& width=&100%&&&/iframe&js代码：&script type=&text/javascript&&&function reinitIframe(){&&var iframe = document.getElementById(&frame_content&);&&try{&&&var bHeight = iframe.contentWindow.document.body.scrollH&&&var dHeight = iframe.contentWindow.document.documentElement.scrollH&&&var height = Math.max(bHeight, dHeight);&&&iframe.height =&&&}catch (ex){}&}&window.setInterval(&reinitIframe()&, 200);&/script&
正文(*)(留言最长字数:1000)随笔 - 443
评论 - 1848Iframe 自适应高度并实时监控高度变化的js代码-javascript技巧
不得不用到iframe，且被强烈要求不能让它出现滚动条！嵌入的页面肯定是高度不一的，页面中也不能出现大片空白，所以也不能写死高度！真是麻鬼烦啊！
google N次 + 百度M次 + 试验了1605次之后（听说农药1605就是实验了这么多次后出来的），得出下面成果，在IE7及Firefox3里试了下还能凑合着用用！ 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 scrollH//scrollHeight var offsetH//offsetHeight，包含了边框的高度 if (doc.height) { //Firefox支持此属性，IE不支持 docHei = doc. } else if (doc.body) { //在IE中，只有body.scrollHeight是与当前页面的高度一致的， //其他的跳转几次后就会变的混乱，不知道是依照什么取的值！ //似乎跟包含它的窗口的大小变化有关 if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetH if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollH } else if(doc.documentElement) { if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetH if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollH } /* docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！ */ return docH }
3、最后修改Iframe的高度，并用一个定时器来不间断检查它包含的页面的高度变化。 复制代码 代码如下: function doReSize() { var iframeWin = window.frames['ifrm']; var iframeEl = window.document.getElementById? window.document.getElementById('ifrm'): document.all? document.all['ifrm']: 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 scrollH//scrollHeight var offsetH//offsetHeight，包含了边框的高度 if (doc.height){ //Firefox支持此属性，IE不支持 docHei = doc. } else if (doc.body){ //在IE中，只有body.scrollHeight是与当前页面的高度一致的， //其他的跳转几次后就会变的混乱，不知道是依照什么取的值！ //似乎跟包含它的窗口的大小变化有关 if(doc.body.offsetHeight) docHei = offsetHei = doc.body.offsetH if(doc.body.scrollHeight) docHei = scrollHei = doc.body.scrollH } else if(doc.documentElement){ if(doc.documentElement.offsetHeight) docHei = offsetHei = doc.documentElement.offsetH if(doc.documentElement.scrollHeight) docHei = scrollHei = doc.documentElement.scrollH } /* docHei = Math.max(scrollHei,offsetHei);//取最大的值，某些情况下可能与实际页面高度不符！ */ return docH } function doReSize(){ var iframeWin = window.frames['Main']; var iframeEl = window.document.getElementById? window.document.getElementById('Main'): document.all? document.all['Main']: 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&