获取嵌套 iframe 尺寸的正确方法

Question

我在一个不是我的域的 head 标记中有一个 javascript，它正在页面上寻找 DIV 来测量高度和宽度。 DIV 的名称在一个数组中。每个 div 都有一个未定义的大小。 div 的大小将根据从不同域加载的 iframe 增长。 div 可能并不总是与 iframe 的大小相同，因此 div 不是拉取大小的可靠元素。因此，我必须测量 iframe。但是，我的问题是我的代码加载在头部，有时在定义 div 的大小之前加载，这意味着 iframe 还没有准备好。然后，我执行 setTimeout 来检查 div 的高度和宽度是否大于 1。但是，我注意到在 div 和 iframe 内容直观地出现在屏幕上之后，在控制台记录大小之前会有几秒钟的延迟内嵌框架。 iframe 内容加载后，我需要尺寸。如何让这段代码更有效率？

页面标题

var oDv = ["div-0", "div-1", "div-2"];
<script src="mydomain.js"></script>

页面正文

<div id="div-0">
<script src="gets-an-iframe-from-some-other-domain.js"></script>

mydomain.js（又名我的脚本）

window.addEventListener('load', pageFullyLoaded, false);
function pageFullyLoaded(e) {
    var index;
    for (index = 0; index < oDv.length; index++){
        measure(oDv[index]);
    }
}
function measure(div){  
    var divElement = document.getElementById(div);
    if(divElement === null){
        return;
    }
    var iframeElement = document.getElementById(div).getElementsByTagName('iframe')[0];
    var iframeDimensions = window.getComputedStyle(iframeElement, null);
    var iframeHeight = parseInt(iframeDimensions.getPropertyValue("height"));
    var iframeWidth = parseInt(iframeDimensions.getPropertyValue("width"));
    if((iframeHeight || iframeWidth) == 1){
        timer();
    }
    else{
        console.log(iframeHeight+" "+iframeWidth);
    }
}
function timer(){
    var T = setInterval(function(){
            if((iframeHeight || iframeWidth) == 1){
                iframeHeight = parseInt(iframeDimensions.getPropertyValue("height"));
                iframeWidth = parseInt(iframeDimensions.getPropertyValue("width"));                 
            }
            else{
                clearInterval(T);
            }
}, 100);

更新 1 我想我需要解决 window.addEventListener('load', pageFullyLoaded, false);因为有时第一个 DIV 会在页面内容的其余部分仍在加载时加载。有时 iframe 在页面内容完成之前加载。因此，顶部的 DIV/iframe 已准备好进行测量，但我的代码尚未启动，因为它仍在等待整个页面加载。另外，如果可能的话，我想避免使用 setTimeout。

更新 2 我尝试了以下代码，但出现以下错误：“未捕获的 TypeError：无法读取属性 'getElementsByTagName' of null”。我相信这是因为当我检查这个时，DIV 存在但 iFrame 还没有。我不想尝试将事件侦听器添加到要加载的页面的窗口，因为我需要尽快调整大小。

    function iframeReady(div){
    console.log(div+' Start Function');
    var iframe = document.getElementById(div).getElementsByTagName('iframe')[0];
    iframe.onload = function() {
        console.log('iFrame loaded');
        var iframeDimensions = window.getComputedStyle(iframe, null);
        var iframeHeight = parseInt(iframeDimensions.getPropertyValue("height"));
        var iframeWidth = parseInt(iframeDimensions.getPropertyValue("width"));
        console.log('iframeLoaded '+div+' iframe dimensions: '+iframeWidth+'x'+iframeHeight);
    }
}
iframeReady('a-div-id');

在上面我在控制台中看到以下内容：

• a-div-id 启动函数
• 未捕获的类型错误：无法读取 null 的属性“getElementsByTagName”

我想我只需要将上述内容放入一个 settimeout 循环中，以继续检查 iframe 的存在吗？

Answer 1

尝试使用iframe.onload 事件

var iframe = document.getElementByTagName("iframe")[0];
iframe.onload = function() {
    console.log(iframe.getBoundingClientRect());
}