Question

我在该网站上有一个网站和一个iFrame，还有很多其他内容（图片等）。

现在我使用jQuery＆＃39; <div class="container"> <a href="./show.html"> <div class="image-over"> <p class="descfirst">Progressive</p> <div class="mix pink large square" style="background: url('./img/night.jpg')"> <h1>3 | Test</h1> </div> </div> </a> </div>来执行代码。在该代码中，我试图操纵iFrame中的内容。但是，我必须确保加载iFrame以执行代码。

iFrame通常在代码执行时完全同时加载，因此有时会失败，有时则不会。

如果我使用$(document).ready(function() { ... });，事件并不总是被执行，因为在那一刻我附加了该加载监听器，iFrame可能已经完成加载，并且加载事件不会再次执行。如果我把它遗弃，那些元素有时候还没有（代码执行得太早）。

所以我想要实现的是：

$('#iframe').load(function(){ });

有没有更好的方法来实现这一点而不使用脏超时？或者，如果使用这种方法，是否有一个函数来检查元素是否已经加载？

Answer 1

确保在设置iFrame $('#iframe').load(function(){ });之前执行src。

要实现此目的，请从javascript而不是HTML中设置src。

此外，加载顺序在这里很重要。如果您的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之前设置它，通过调用它{例如{{1}部分：

head

Answer 3

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

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

$（处理程序）
$（document）.ready（handler）
$（＆＃34; document＆＃34;）.ready（handler）
$（＆＃34; img＆＃34;）.ready（handler）
$（）。ready（handler）

load () documentation， read () documentation

检查元素是否已加载

3 个答案: