Question

我正在尝试在任何类似HERE的网站上显示我的iframe但由于某种原因未正确计算高度。我在样式标签上获得8px而不是1000+以正确显示该块。

<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>

Answer 1

设置高度的行（即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>

Javascript iframe未正确计算高度

1 个答案: