jQuery .ready 在动态插入的 iframe 中 [英] jQuery .ready in a dynamically inserted iframe

问题描述

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

We are using jQuery thickbox to dynamically display an iframe when someone clicks on a picture. In this iframe, we are using galleria a javascript library to display multiple pictures.

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

The problem seems to be that $(document).ready in the iframe seems to be fired too soon and the iframe content isn't even loaded yet, so galleria code is not applied properly on the DOM elements. $(document).ready seems to use the iframe parent ready state to decide if the iframe is ready.

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

If we extract the function called by document ready in a separate function and call it after a timeout of 100 ms. It works, but we can't take the chance in production with a slow computer.

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

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

My question: which jQuery event should we bind to to be able to execute our code when the dynamic iframe is ready and not just it's a parent?

推荐答案

我回答了一个类似的问题(参见 IFRAME 加载完成后的 Javascript 回调?).您可以使用以下代码获得对 iframe 加载事件的控制:

I answered a similar question (see Javascript callback when IFRAME is finished loading?). You can obtain control over the iframe load event with the following code:

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

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

在处理 iframe 时，我发现使用 load 事件代替文档就绪事件就足够了.

In dealing with iframes I found good enough to use load event instead of document ready event.

这篇关于jQuery .ready 在动态插入的 iframe 中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！