获得嵌套iframe尺寸的适当方法
我有一个javascript在一个领域的头标记，它不是我的，它在页面上寻找DIVs来测量高度和宽度。DIVs的名称位于数组中。每个div有一个未定义的大小。div的大小将基于从不同域加载的iframe而增长。div可能并不总是与iframe相同的大小，因此div不是一个可以将其大小拉出的可靠元素。所以，我必须测量一下。但是，我的问题是，我的代码加载在头中，有时在定义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);UPDATE 1我想我需要绕过window.addEventListener('load'，pageFullyLoaded，false)；因为有时候第一个DIV加载时，其余的页面内容仍在加载。有时候，iframe会在完成页面内容之前加载。因此，顶级的DIV/iframe已经准备就绪，但是我的代码还没有启动，因为它仍然在等待整个页面的加载。此外，如果可能的话，我想避免使用setTimeout。
UPDATE 2我尝试了以下代码，但我得到了以下错误："Uncaught TypeError: Uncaught:无法读取属性'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启动函数
- Uncaught :无法读取属性'getElementsByTagName‘的null
我想我只需要将上面的内容放入一个settimeout循环中，以便首先检查iframe是否存在？
回答 1
Stack Overflow用户
发布于 2015-10-22 08:48:51
尝试使用iframe.onload事件
var iframe = document.getElementByTagName("iframe")[0];
iframe.onload = function() {
console.log(iframe.getBoundingClientRect());
}https://stackoverflow.com/questions/33272293
复制相似问题
腾讯云开发者
