動態調整具有jQuery或Javascript動態內容的iFrame的大小

Question

我有一個這樣加載的iFrame：

<iframe src="http://otherdomain.com/sourceContent.html" id="theIframe" frameborder="0" seamless>

我需要動態調整它的大小，以便沒有滾動條，里面的內容可以垂直變高（根據用戶單擊的內容動態地變高）。

我知道您可以在頁面加載時動態調整iframe的大小，但是如果iframe的內容增加了怎么辦？

源HTML也位於不同的域中。

Answer 1

將此添加到您的部分

<script language="javascript" type="text/javascript">
  function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
  }
</script>

並將您的iframe更改為此：

<iframe src="http://otherdomain.com/sourceContent.html" id="theIframe"  frameborder="0" scrolling="no" seamless onload='javascript:resizeIframe(this);'>

Answer 2

如果您要談論的是基於加載后iframe中可能發生變化的內容動態調整其大小，那么這可能會很棘手。 如果iframe是由您控制的，或者是來自同一域的，則會更容易，否則可能無法始終如一地取決於所加載的瀏覽器和網站。

iframe會創建各種類型的安全沙箱，以使這些頁面無法通過郵寄消息相互通信（或者，如果它們來自同一域，則可以通過普通的javascript進行通信。）

框架內的某些代碼需要向外部窗口發送消息，並且必須以這種方式調整大小。 如果同時控制兩者，則只需要類似於@Sujit答案中發布的JavaScript即可。