使用 jquery click 事件创建动态 iframe

Question

当我像这样动态创建 iframe 时

$( '<iframe/>' )
    .attr('id', 'aaoifr0')
    .attr('src', aPageName)
    .appendTo(_public.content);

并向 iframe 中的body 元素添加点击事件

$('#aaoifr0')
    .contents().find('body').click(function(){ alert(0) });

它不起作用。

但是，如果我在显示 iframe 后通过 firebug 手动添加事件，如下所示：

$('#aaoifr0').contents().find('body').click(function(){ alert(0) });

效果很好！

我尝试了多种方法来检查 iframe 内容的负载同步/异步，但找不到有用的答案。任何想法如何使这项工作？

Answer 1

好的，解决了..

解决方法是使用JQuery创建的frame对象的.load()方法。

注意：不要使用.ready()，它会引用父文档。您可以通过以下方式对其进行测试：

$('<iframe/>')
  .attr('id', 'someId')
  .attr('src', 'aPageSrc')
  .appendTo(_public.content)
  .load(function() {
    $(this).contents().find('body').click(function() {
      alert('Loaded!');
    });
  })
  .ready(function() {
    $(this).contents().find('body').click(function() {
      alert('Ready!');
    });
  });

这很难想象，我希望接下来的事情会容易很多。

Answer 2

你可以试试

$('<iframe id="aaoifr0" src="' + aPageName  + '"></iframe>')

此外，当您附加 jquery 对象时，您需要附加到另一个 jquery 对象，而不是对象的内容，_public.content 可能是一个问题，这取决于它是什么对象。尝试更安全

$('<iframe id="aaoifr0" src="' + aPageName  + '"></iframe>').appendto( $('document.body') );

我认为使用 iframe 我有一个问题添加

<iframe />

你需要

<iframe></iframe>

如果 iframe src 来自同一个域，jquery 也只能访问 iframe 内容。但既然萤火虫可以工作，这应该不是问题

不确定是否有帮助，如果有其他问题，请告诉我。