帶有嵌套iframe的jQuery Auto Height iframe

Question

您好，我的頁面上有一個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的jQuery方法[ .ajax() .get() .load() ]。