iframe自适应高度（兼容目前所有主浏览器)_iframe谷歌浏览器不兼容资源-CSDN文库

需积分: 31 117 浏览量 2012-12-08 21:03:06 上传评论 1 收藏 20KB DOCX 举报

iFrame 自适应高度（兼容所有主浏览器） iFrame 自适应高度是前端开发中常见的问题，很多开发者在搜索引擎中搜索相关解决方案，但大多数文章只能解决静态高度的问题，而忽视了 JS 操作 DOM 之后的动态同步问题。同时，在浏览器兼容性方面也存在一定的漏洞。本文将深入探讨 iFrame 自适应高度的解决方案，并提供了相关的代码示例。 iFrame 自适应高度的定义是指隐藏 iFrame 的 border 和 scrollbar，让用户无法察觉到它是一个 iFrame。当 iFrame 需要切换页面或执行 DOM 动态操作时，需要程序去同步 iFrame 高度和被包含页的实际高度。传统的解决方法有两种：一是每个被包含页在内容加载完毕之后，执行 JS 取得本页面的高度，然后去同步父页面的 iFrame 高度；二是在主页面 iFrame 的 onload 事件中执行 JS，去取得被包含页的高度内容，然后去同步高度。然而，这两种方法都存在一定的缺陷，它们只能处理静态的内容加载，而无法解决 JS 操作 DOM 引起的高度变化问题。为了解决这个问题，可以使用 Interval 的方法，不断地获取被包含页的高度，然后进行同步。下面是一个简单的 Demo 代码： ```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> ``` 在测试中，我们发现这种方法可以在多个浏览器中正确地工作，不会对 CPU 产生影响。在浏览器兼容性方面，获取正确的高度是关键。主要有两个值需要比较：body.scrollHeight 和 documentElement.scrollHeight。为了避免不必要的错误，需要在页面中申明 doctype。 ```html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> ``` 在主页面追加以下测试代码，以输出这两个值： ```html <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> ``` 被加载页面可以切换一个绝对定位的层，来使页面高度动态变化。 iFrame 自适应高度是前端开发中需要注意的问题，需要深入探讨以解决 JS 操作 DOM 引起的高度变化问题，并且需要注意浏览器兼容性问题。

资源推荐

资源详情

资源评论