iframe高度自适应

来源：互联网发布：mac 当前目录打开终端编辑：程序博客网时间：2024/05/22 06:14
自适应高度吧所谓iframe自适应高度基于界面美观交互考虑隐藏iframeborderscrollbar让看iframeiframe始终调用同固定高度页面我直接写死iframe高度iframe要切换页面或者包含页面要做DOM态操作候需要程序同步iframe高度包含页实际高度顺便说iframe迫已候才用给前端发带太麻烦传统做致两：每包含页本身内容加载完毕执行JS取本页面高度同步父页面iframe高度二主页面iframeonload事件执行JS取包含页高度内容同步高度代码维护角度考虑二优于每包含页都要引入段相同代码做事情创建副本考虑FXIE并且iframe面内容进行DOM操作仍用简单便传统处理式： <iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=this.contentWindow.document.documentElement.scrollHeight"></iframe> 两都处理静东西内容加载候执行JS操作DOM引起高度变化都太便主窗口做Interval停获取包含页高度做同步即便解决JS操作DOM问题呢答案肯定Demo页面：主页面 iframe_a.html 包含页面 iframe_b.htm  iframe_c.html主页面代码示例：<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0"></iframe><script type="text/javascript">function reinitIframe(){var iframe = document.getElementById("frame_content");try{iframe.height =  iframe.contentWindow.document.documentElement.scrollHeight;}catch (ex){}}window.setInterval("reinitIframe()", 200);</script>直执行效率问题我做测试同5窗口（IE6、IE7、FF、Opera、Safari）执行代码CPU影响甚至调整2ms没影响（基本维持0%占用率）面谈谈各浏览器兼容性问题何获取确高度主要body.scrollHeightdocumentElement.scrollHeight两值比较注意本文用doctype同doctype应该影响结假页面没申明doctype先加吧<!DOCTYPE HTML PUBLIC "主页面追加测试代码输两值代码示例：<div><button onclick="checkHeight()">Check Height</button></div><script type="text/javascript">function checkHeight() {var iframe = document.getElementById("frame_content");var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;alert("bHeight:" + bHeight + ", dHeight:" + dHeight);}</script>加载页面切换绝定位层使页面高度态改变层展则撑高页面高度代码示例：<div><button onclick="toggleOverlay()">Toggle Overlay</button></div><div style="height:160px;position:relative"><div id="overlay" style="position:absolute;width:280px;height:280px;display:none;"></div></div><script type="text/javascript">function toggleOverlay() {var overlay = document.getElementById('overlay');overlay.style.display = (overlay.style.display == 'none') ? 'block' : 'none';}</script>面列代码各浏览器测试值：（bHeight = body.scrollHeight, dHeight = documentElement.scrollHeight, 红色 = 错误值, 绿色 = 确值）/层隐藏层展bHeightdHeightbHeightdHeightIE6    184    184    184    303    IE7    184    184    184    303    FF    184    184    184    303    Opera    181    181    300    300    Safari    184    184    303    184    暂且视Opera比别少3像素问题…看没绝定位东西两值相等取哪都所谓各浏览器表现太相同单取哪值都找条规律取两值值兼容各浏览器所我主页面代码要改造：function reinitIframe(){var iframe = document.getElementById("frame_content");try{var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;var height = Math.max(bHeight, dHeight);iframe.height =  height;}catch (ex){}}window.setInterval("reinitIframe()", 200);基本解决兼容性问题顺便说光绝定位层影响值float导致两值差异演示Demo发现除IE其浏览器层展再隐藏取高度值维持展高度303非隐藏真值184说高缩现象同包含页面间做切换发高页面切换矮页面候取高度高值归纳iframe窗体高度高于文档实际高度候高度取窗体高度窗体高度低于实际文档高度取文档实际高度要想办同步高度前高度设置比实际文档低值所iframe添加 onload=this.height=100″让页面加载候先缩足够矮再同步高度值实际应用决定足够矮能太矮否则FF等浏览器明显闪烁DOM操作候主页面监听能DOM操作完高度变我实际项目本收益间权衡我并没做事情每DOM函数都要插入代码代价太高其实层缩缩掉致命包括Demo没做事情读者更请告诉我终主页面代码：<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe><script type="text/javascript">function reinitIframe(){var iframe = document.getElementById("frame_content");try{var bHeight = iframe.contentWindow.document.body.scrollHeight;var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;var height = Math.max(bHeight, dHeight);iframe.height =  height;}catch (ex){}}window.setInterval("reinitIframe()", 200);</script>附Demo页面： 主页面 iframe_a.html 包含页面 iframe_b.htm  iframe_c.html
阅读全文
0 0