JS实现iframe自适应高度的方法(兼容IE与FireFox)

本文主要是关于JavaScript实现iframe自适应高度的方法介绍。对于经常遇到iframe高度不适应页面变化的问题，我们可以利用JavaScript来动态调整iframe的高度。

要感谢那位不知名的朋友，他分享的狼蚁网站SEO优化的代码，真的非常实用。即使对于JS水平不高的朋友，也能轻松理解并应用这段代码。只需要将代码复制粘贴到iframe所在页面的标签内，并修改ID名即可。

接下来，让我们进入具体的操作步骤。

步骤1： 在标签内添加如下JavaScript代码。

```html

```

步骤2： 在iframe标签中添加id和onload事件，并调用adjustFrameSize()函数。例如：

```html

```

这段代码在实际应用中有一个小缺陷，就是iframe中的内容和外边框（如果存在的话）的距离可能有些小。可以根据实际情况适当进行调整。除了IE6.0以上版本和Firefox，其他浏览器的兼容性尚未进行测试。如果有任何问题或更好的解决方法，欢迎分享。

这段代码简单易懂，易于修改，能够很好地解决iframe自适应高度的问题。希望能够帮助到有需要的朋友。当面临在iframe页面中通过Ajax加载内容或JavaScript动态添加内容导致iframe高度变化的问题时，我们可以通过以下方式来解决。

子页面中的策略：

在子页面内，我们可以添加一个名为`changeHeight`的函数，用于动态调整iframe的高度。这个函数会获取当前页面的高度，并通过改变父窗口的哈希值来传递这一信息。具体代码如下：

```javascript

function changeHeight(){

// 获取当前页面高度并设置到父窗口的哈希值中

window.location.hash = " + $(document).height();

}

```

在DOM结构发生变化时，调用这个函数即可。

接下来，我们来看父页面的处理方式：

父页面可以通过监听窗口的哈希值变化来适应iframe的高度变化。首先获取iframe元素，然后定义一个名为`iframeHeight`的函数，该函数会读取哈希值中的高度信息并应用到iframe上。代码如下：

```javascript

var iframe = document.getElementById("iframe1");

function iframeHeight() {

var hash = window.location.hash.slice(1), h; // 获取哈希值中的高度信息

if (hash && /height=/.test(hash)) { // 如果哈希值包含高度信息

h = hash.replace(", ""); // 提取高度值

iframe.style.height = h+"px"; // 设置iframe的高度

window.location.hash = "temp"; // 防止点击其他页面时高度不变，临时更改哈希值

}

setTimeout(iframeHeight, 100); // 每隔一段时间重新检查高度变化

}

iframeHeight(); // 启动函数

```

以上代码确保了iframe的高度能够根据内容的变化自动调整。对于对JavaScript有更多兴趣的读者，我们站内有更多专题等待您，如《深入浅出JavaScript》、《JavaScript实战案例》等。希望这些内容能对您的JavaScript程序设计之路有所帮助。

本文所述内容仅为对问题的解决方案的阐述，不涉及无关内容，如电话、、及手机号码等已做过滤处理。文中代码仅供参考和学习，实际应用中请根据实际情况进行调整和优化。如有更多疑问或需求，请随时与我们联系。本文由cambrian渲染完成。