😊 jQuery 实现 iframe 自适应高度 🎯

在网页开发中，`iframe` 是一个非常实用的功能，但它的固定高度有时会显得不够灵活。尤其是在内容动态变化时，如果 `iframe` 的高度不能自适应，就会导致页面布局混乱。这时，我们可以通过 jQuery 来实现 `iframe` 的高度自适应！💪

首先，确保你的项目引入了 jQuery 库：

```html

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

```

接下来，在 HTML 中定义你的 `iframe`：

```html

<iframe id="myIframe" src="your-page.html" frameborder="0"></iframe>

```

然后，使用以下 jQuery 脚本来实现自适应高度：

```javascript

$(document).ready(function() {

function resizeIframe() {

const iframe = $('myIframe');

iframe.height('auto'); // 先重置高度

iframe.height(iframe[0].contentWindow.document.body.scrollHeight + 10); // 设置为内容高度+10px缓冲

}

// 页面加载完成后调用

resizeIframe();

// 如果 iframe 内容可能动态变化，可以监听窗口大小调整事件

$(window).resize(resizeIframe);

});

```

通过这段代码，`iframe` 的高度将随着内容的变化而自动调整，避免了内容溢出或多余空白的问题！🎉

💡 小提示：记得根据实际需求调整缓冲值（如 `+10px`），以保证用户体验更佳哦！