javascript - jQuery .ready 在动态插入的 iframe 中

Question

我们正在使用 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); });

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

Answer 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 时，我发现使用加载事件而不是文档就绪事件已经足够好了。