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

检查元素是否已加载

  •  5
  • Florian Müller  · 技术社区  · 7 年前

    我有一个网站和一个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 回复  |  直到 6 年前
        1
  •  3
  •   Roamer-1888    7 年前

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

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

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

        2
  •  3
  •   suther    7 年前

    您可以检查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    7 年前

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

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

    load () documentation read () documentation