具有嵌套iframe的Jquery Auto Height iframe

Question

你好我的页面中有一个iframe，其中有另一个iframe（嵌套），嵌套iframe加载多个不同高度的页面，目前我使用的代码对我有用，但只调整嵌套的高度但是我想调整两个iframe的大小（主iframe和另一个iframe，它自动用在主iframe中）。我搜索了解决方案，但仍然没有成功，请帮助我

以下是我在iframe中使用的代码

<script language="javascript" type="text/javascript">

  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';

  }

</script>

<iframe name="Stack" src="inline-main.php" frameborder="0" scrolling="no" id="iframe" onload='javascript:resizeIframe(this);' width="1060px">Browser not compatible.</iframe>

Answer 1

将JavaScript放在父页面中，而不是放在目标iframe

中

我使用父页面中的上述代码和iframed子页面测试了您的示例，其中包含嵌套的iframe;两个iframe都按预期调整大小。

在上面的解释中，您说“这是我在 两个iframe ”（强调添加）中使用的代码，其中让我认为你在目标iframe中有代码，而不是每个目标iframe的父代。

以下是每页所需的基本内容：

---

父页面

<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="iframe.html" frameborder="0" scrolling="no" onload='javascript:resizeIframe(this);'>Browser not compatible.</iframe>

---

外部iframe

<script language="javascript" type="text/javascript">
function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}
</script>
<iframe src="nested-iframe.html" frameborder="0" scrolling="no" onload='javascript:resizeIframe(this);'>Browser not compatible.</iframe>

---

嵌套iframe

<h1>Hello World</h1>

---

注意：您只能在同一域的iframe上执行此操作。它不适用于跨域iframe。此外，如果您可以访问包括父页面在内的所有页面，那么我建议不要使用iframe来加载同域内容;使用AJAX或者，如果可用的话，使用基于jQuery AJAX的方法[.ajax()，.get()，.load()]。