jQuery .ready in a dynamically insert iframe

javascript jquery iframe thickbox galleria

2022-08-30 01:36:13

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

问题似乎是在iframe中似乎被过早触发，并且iframe内容甚至尚未加载，因此galleria代码未正确应用于DOM元素。似乎使用 iframe 父就绪状态来决定 iframe 是否已就绪。$(document).ready$(document).ready

如果我们在单独的函数中提取文档 ready 调用的函数，并在超时 100 毫秒后调用它。它有效，但我们不能在生产中使用慢速计算机来冒险。

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

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

答案 1

我回答了一个类似的问题（请参阅IFRAME完成加载时的Javascript回调？）。您可以使用以下代码获得对 iframe 加载事件的控制：

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

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

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

答案 2

使用jQuery 1.3.2，以下内容对我有用：

$('iframe').ready(function() {
  $('body', $('iframe').contents()).html('Hello World!');
});

校订：！实际上，上面的代码有时看起来像是在Firefox中工作，而从来都不像在Opera中工作。

相反，我为我的目的实施了一个轮询解决方案。简化如下：如下所示：

$(function() {
  function manipIframe() {
    el = $('body', $('iframe').contents());
    if (el.length != 1) {
      setTimeout(manipIframe, 100);
      return;
    }
    el.html('Hello World!');
  }
  manipIframe();
});

这不需要在被调用的 iframe 页面中编写代码。所有代码驻留并从父框架/窗口执行。