iFrame - iFrame中內容更改的自動高度

Question

我有以下代碼： -

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

<div class="resizable">
    <iframe src="http://yellow-taxi.co.uk/onlinebooking/index.php" frameborder="0" width="100%" height="100%" scrolling="no" onload="resizeIframe(this)"></iframe>
</div>

Javascript將它的高度調整為iFrame的初始高度，但是當您完成預訂過程時，iFrame的高度會增加。 有沒有辦法根據內容變化時內置的內容自動調整iFrame的高度？

注意： iFrame與iFrame src顯示在同一個域中。

Answer 1

試試這個。 不需要Jquery，但是當內容更改時，您將不得不調用resizeIframe。

function resizeIframe(obj) {
    var newheight;
    var newwidth;

    if(document.getElementById){
        newheight = document.getElementById(obj).contentWindow.document .body.scrollHeight;
        newwidth = document.getElementById(obj).contentWindow.document .body.scrollWidth;
    }

    document.getElementById(obj).height = (newheight) + "px";
    document.getElementById(obj).width = (newwidth) + "px";
}

這是一個示例iFrame及其中的必要屬性。 請務必使用您的iFrame名稱調用上述方法。

<iframe src="yourpage.htm" width="100%" height="300px" id="yourIframe" marginheight="0" frameborder="0" onLoad="resizeIframe('yourIframe');"></iframe>

還有一個很好的JQuery插件可以完成任務，並且可以在域上工作： https ： //github.com/house9/jquery-iframe-auto-height

Answer 2

長話短說，你不能，除非你的頁面與iframe頁面在同一個域中。 您遇到了跨域限制，並且作為瀏覽器設置的安全措施，您將無法訪問該iframe內容中的JS，DOM元素或屬性。

所以解釋