代码之家 › 专栏 › 技术社区 › Florian Müller

检查元素是否已加载

loading dom events jquery

5

Florian Müller · 技术社区 · 8 年前

我有一个网站和一个iFrame在该网站上,以及许多其他内容(图像等)。

$(document).ready(function() { ... }); 执行代码。在这段代码中,我试图操作iFrame中的内容。然而,我必须确保加载iFrame来执行代码。

iFrame通常在执行代码的同一时间加载,因此有时会失败,有时不会。

如果我使用 $('#iframe').load(function(){ }); ,事件并不总是执行,因为在我连接该加载侦听器的那一刻,iFrame可能已经完成了加载,并且加载事件不会再次执行。如果我不理会它,元素有时还不存在(代码执行得太早)。

所以我想要实现的是这样的:

if iFrame is already loaded
  -- execute code 
else 
  -- $('#iframe').load(function() {Â /*execute code*/ });

有没有更好的方法在不使用脏超时的情况下实现这一点?或者,如果使用这种方法,是否有功能检查元素是否已加载?

3 回复 | 直到 7 年前

1

3

Roamer-1888 8 年前

$('#iframe').load(function(){ }); 在iFrame的 src 已设置。

为此,设置 src公司 来自javascript,而不是HTML。

jQuery(window).load(function() {...}) ,行为将不同于 jQuery(function() {...}) .

2

3

suther 8 年前

您可以检查iframe是否有一些内容,然后使用以下逻辑触发加载事件:

$('#iframe').one('load', function(){
  console.log("Sure load event is called!")
}).each(function(){
  if(this.contentDocument.body.children.length) {
    $(this).trigger('load');
  }
})

对于处理跨域iframe:

我想,如果你不需要支持IE8,最好的选择可能是捕捉 load iframe 在DOM中,通过调用它,例如内部 head

document.addEventListener(
    'load',
    function(event){
        var elm = event.target;
        if( elm.id === 'iframe'){ // or any other filtering condition
            console.log("Sure iframe is loaded!")
        }
    },
    true // Capture event
);

3

1

Eric Farias 8 年前

DOM总是在页面完全加载之前准备就绪,在.ready()处理程序期间执行的代码中附加加载事件侦听器通常是不安全的。例如,可以使用诸如$.getScript()之类的方法在页面加载后很长时间内动态加载脚本。虽然由.ready()添加的处理程序将始终在动态加载的脚本中执行,但窗口的加载事件已经发生,这些侦听器将永远不会运行。

$(处理程序)
$(文档)。就绪(处理程序)
$(“文件”)。就绪(处理程序)
$().就绪(处理程序)

load () documentation read () documentation