检查元素是否加载

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 的 src 之前执行 $('#iframe').load(function(){ });。

为此，请从 javascript 设置 src，而不是 HTML。

此外，加载顺序在这里很重要。如果您的 jQuery 的整体包装器是 jQuery(window).load(function() {...})，则行为将与 jQuery(function() {...}).

给出的行为不同

Answer 2

对于相同的域 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
);

Answer 3

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

jQuery 提供了几种附加函数的方法，当 DOM 准备就绪时，该函数将运行。以下所有语法都是等效的：

$(处理程序)
$(文档).ready(处理程序)
$("document").ready(处理程序)
$( "img" ).ready(处理程序)
$().ready(处理程序)

load () documentation, read () documentation

检查元素是否加载

Check if element is loaded

jquery

events

dom

loading