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

Question

我在一个不属于我的域的 head 标签中有一个 javascript，它正在页面上寻找 DIV 来测量高度和宽度。 DIV 的名称位于一个数组中。每个 div 都有未定义的大小。 div 的大小将根据从不同域加载的 iframe 来增长。 div 可能并不总是与 iframe 大小相同，因此 div 不是一个可靠的拉取大小的元素。因此，我必须测量iframe。然而，我的问题是我的代码加载到头部，有时会在定义 div 大小之前加载，这意味着 iframe 尚未准备好。然后，我执行 setTimeout 来检查 div 的高度和宽度是否大于 1。但是，我注意到，在 div 和 iframe 内容直观地显示在屏幕上之后，在控制台记录以下大小之前有几秒钟的延迟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我尝试了以下代码，但收到以下错误:“未捕获类型错误:无法读取 null 的属性“getElementsByTagName””。我相信这是因为当我检查 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());
}