jquery - 检查元素是否已加载

Question

我有一个网站和该网站中的 iFrame，以及许多其他内容(图像等)。

现在我使用 jQuery 的 $(document).ready(function() { ... }); 来执行代码。在该代码中，我尝试操作 iFrame 中的内容。但是，我必须确保 iFrame 已加载才能执行代码。

iFrame 通常与代码执行的时间完全相同，因此有时会失败，有时不会。

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

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

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

是否有更好的方法可以在不使用脏超时的情况下实现此目的？或者，如果使用这种方法，是否有一个函数可以检查元素是否已加载？

Answer 1

对于同一域 iframe(这似乎是您的情况):

您可以检查 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 事件并在 DOM 中设置 iframe 之前设置它，方法是调用例如在 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
);