【问题标题】：jQuery .ready in a dynamically inserted iframejQuery .ready 在动态插入的 iframe 中
【发布时间】：2010-09-17 07:59:12
【问题描述】：

我们正在使用 jQuery thickbox 在有人点击图片时动态显示 iframe。在这个 iframe 中，我们使用 galleria 一个 javascript 库来显示多张图片。

问题似乎是 iframe 中的 $(document).ready 似乎被触发得太早了，而且 iframe 内容甚至还没有加载，因此 Galleria 代码没有正确应用于 DOM 元素。 $(document).ready 似乎使用 iframe 父级就绪状态来决定 iframe 是否就绪。

如果我们将 document ready 调用的函数提取到一个单独的函数中，并在 100 毫秒超时后调用它。它可以工作，但我们不能在速度慢的计算机上冒险。

$(document).ready(function() { setTimeout(ApplyGalleria, 100); });

我的问题：我们应该绑定哪个 jQuery 事件才能在动态 iframe 准备好时执行我们的代码，而不仅仅是它的父级？

【问题讨论】：

当您直接加载而不是通过 iframe 加载 Galleria 时，您确认它可以正常工作，对吗？
是的，当我们直接在普通页面中使用 Galleria 时，它可以完美运行。
Javascript callback when IFRAME is finished loading?的可能重复

标签： javascript jquery iframe thickbox galleria

【解决方案1】：

我回答了一个类似的问题（请参阅Javascript callback when IFRAME is finished loading?）。您可以通过以下代码获得对 iframe 加载事件的控制：

function callIframe(url, callback) {
    $(document.body).append('<IFRAME id="myId" ...>');
    $('iframe#myId').attr('src', url);

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

在处理 iframe 时，我发现使用加载事件而不是文档就绪事件已经足够好了。

【讨论】：

不应该在调用attr('src')之前设置加载事件吗？
不，没关系。 Load 事件至少在下一个事件循环之前不会触发。
加载事件不适用于用于下载的 iframe。像
加载的问题是它会在所有图像和子帧都加载后触发。一个类似 jQuery 的 ready 事件会更有用。
.load() event is deprecated. Use .on( "load", handler ) instead.

【解决方案2】：

在 IFrames 中，我通常通过在块的最后放置一个小脚本来解决这个问题：

<body>
The content of your IFrame
<script type="text/javascript">
//<![CDATA[
   fireOnReadyEvent();
   parent.IFrameLoaded();
//]]>
</script>
</body>

这对我来说大部分时间都在工作。有时最简单、最天真的解决方案是最合适的。

【讨论】：