Javascript iframe沒有正確計算高度

我想在這樣的任何網站上顯示我的iframe HERE但由於某些原因，高度計算不正確。我在樣式標籤上獲得8像素而不是1000像素以正確顯示該塊。Javascript iframe沒有正確計算高度

<iframe id="iframe" allowtransparency="true" frameborder="0" style="width:100%; border:none" scrolling="no" src="http://newskillsacademy.co.uk/affiliates/iframe.php?&products_ids[]=55072&products_ids[]=51883&products_ids[]=49321&products_ids[]=48561&products_ids[]=48398&products_ids[]=46469&products_ids[]=44080&products_ids[]=43167&products_ids[]=42427&products_ids[]=41068&columns=3&aff_id=3"></iframe> 
<script> 
    var frame = document.getElementById('iframe'); 
    frame.style.height = 0; 
    frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px'; 
</script>

來源

2017-05-25 Adrian

嘗試onload事件，而不是 – mplungjan

@mplungjan的問題是，它像一個iframe發電機，需要放置在第二個域，用戶的地方，但我得到的也是一個跨瀏覽阻斷，並不確定如何從這裏實施解決方案。 – Adrian

跨越原點你可能是SOL – mplungjan

，設置高度的線（即frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px';）是iframe的內容已加載之前可能運行。因此，爲了正確設置高度，必須在加載iframe的內容後執行。要做到這一點

的一種方式是在onload屬性分配給包含該代碼來設置height屬性的函數：

var frame = document.getElementById('iframe'); frame.onload = function() { frame.style.height = frame.contentWindow.document.body.scrollHeight + 'px'; }

看看這證明here。

此外，代碼嘗試一旦JavaScript執行就從DOM獲取iframe。根據腳本標記/文件的位置（例如，通過<head>或<body>加載），DOM可能未準備好。一種解決方案是等待DOMContentLoaded事件。這可以在document上使用EventTarget.addEventListener()來實現。

document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); });

而且因爲您最初使用jQuery標籤的問題，.ready()方法提供了一個快捷方式到這一點。

$(document).ready(function(event) { console.log("DOM is safe to manipulate"); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-05-25 15:52:24

幫助讚賞，但http://be-a.co.uk/testframe.html它現在正在加載一半，並得到一個跨瀏覽器的錯誤，我在這裏搜索，但不明白如何在我的代碼中實現它。請注意iframe在不同的域上。 – Adrian

你是否擁有對這兩個域的控制權？參考[這個答案]（https://stackoverflow.com/a/9393545/1575353）關於一個可能的解決方案... –

在第二個域不會有控制權（在這種情況下，我有），它就像一個橫幅用戶生成並放置在他的網站上。 – Adrian

Javascript iframe沒有正確計算高度

回答

相關問題