iframe高度自适应解决方案，兼容所有浏览器

"这篇文章主要介绍了如何使用iframe解决跨域页面高度自适应的问题，提供了一段兼容所有浏览器的终极代码，确保iframe内容加载后不会出现滚动条或者内容显示不全的BUG。" 在Web开发中，iframe（Inline Frame）是一种常用的嵌入其他网页或内容的方式。然而，当iframe内嵌的页面高度超过iframe本身时，可能会导致滚动条显示或者内容被截断。为了解决这个问题，我们需要实现一个动态调整iframe高度的功能，确保内容能够完整展示。 如提供的代码所示，这是一个通过JavaScript实现的解决方案： 1. 首先，我们定义了一个iframe元素，设置了id为"frame_content"，并指定了其初始高度为100。`<iframe id="frame_content" src="iframe_b.html" scrolling="no" frameborder="0" onload="this.height=100"></iframe>` 这里的`scrolling="no"`是为了隐藏默认的滚动条，`onload`属性中的函数会在iframe内容加载完成后执行，将iframe的高度设置为100，这是初始值，用于防止内容未加载完成时的高度计算不准确。 2. 接下来是关键的JavaScript部分：`<script type="text/javascript">...</script>`，这段代码的主要作用是动态获取iframe内页面的实际高度，并将其设置为iframe的高度。 - `reinitIframe()` 函数负责重新初始化iframe的高度。它尝试访问iframe的内容窗口（`iframe.contentWindow`），然后获取`document.body.scrollHeight`和`document.documentElement.scrollHeight`，这两个属性分别表示文档体和HTML元素的总高度。 - `Math.max(bHeight, dHeight)` 选取两个高度中的最大值，确保无论哪个更高，都能正确设置iframe的高度。 - 由于JavaScript的同源策略限制，我们不能直接在所有情况下访问iframe的内容。因此，`try...catch`结构用来处理可能的错误，如果访问iframe内容失败（如跨域问题），则捕获异常，避免程序中断。 3. 使用 `window.setInterval("reinitIframe()", 200);` 设置定时器，每200毫秒执行一次`reinitIframe()`函数。这样做的目的是因为有些情况下，内容可能不是立即加载完成的，而是逐步加载。通过定时检查，我们可以确保一旦内容加载完成，iframe的高度就会及时调整。 总结来说，这段代码通过JavaScript监听iframe内容的加载，动态获取并设置iframe的高度，以实现跨浏览器、跨域的iframe高度自适应，从而保证用户可以完整查看iframe内的内容，而不会出现滚动条或内容被截断的问题。这是一个实用且高效的解决方案，尤其适用于需要内嵌第三方页面或动态内容的场景。