javascript - jQuery .ready在动态插入的iframe中(jQuery .ready in a dynamically inserted iframe)

Question

We are using jQuery thickbox to dynamically display an iframe when someone clicks on a picture.

(当有人点击图片时，我们使用jQuery thickbox动态显示iframe。)

In this iframe, we are using galleria a javascript library to display multiple pictures.

(在这个iframe中，我们使用galleria一个javascript库来显示多张图片。)

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.

(问题似乎是iframe中的$(document).ready似乎很快被解雇，iframe内容甚至还没有被加载，所以galleria代码没有在DOM元素上正确应用。)

$(document).ready seems to use the iframe parent ready state to decide if the iframe is ready.

($(document).ready似乎使用iframe父级就绪状态来判断iframe是否准备就绪。)

If we extract the function called by document ready in a separate function and call it after a timeout of 100 ms.

(如果我们在单独的函数中提取由文档就绪调用的函数，并在超过100毫秒后调用它。)

It works, but we can't take the chance in production with a slow computer.

(它有效，但我们不能利用慢速计算机生产机会。)

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

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?

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

  ask by EtienneT translate from so

Answer 1

I answered a similar question (see Javascript callback when IFRAME is finished loading? ).

(我回答了一个类似的问题（ 当IFRAME加载完成后，请参阅Javascript回调？ ）。)

You can obtain control over the iframe load event with the following code:

(您可以使用以下代码获取对iframe加载事件的控制权：)

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

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

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

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