的iFrame - 上的iFrame中的內容變化自動高度

我有下面的代碼： -的iFrame - 上的iFrame中的內容變化自動高度

<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顯示在同一個域中。

來源

2016-03-03 nsilva

你們有使用任何JavaScript庫（jQuery的）？ – Jon

是'jquery-1.9.1.js' – nsilva

試試這個。沒有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

來源

2016-03-03 20:24:00 Ageonix

這似乎沒有調整任何東西，我打電話給每個功能 – nsilva

你打電話給你怎麼樣？我將使用我在示例中使用的iFrame更新我的答案。 – Ageonix

我相信在這個答案中你的代碼的第1行有一個缺失。 –

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

SO Explanation

來源

2016-03-03 20:16:11 Jon

iFrame在同一個域中。 – nsilva

的iFrame - 上的iFrame中的內容變化自動高度

回答

相關問題