动态 iframe 加载不触发？答案

【问题标题】：Dynamic iframe onload not firing?动态 iframe 加载不触发？
【发布时间】：2011-09-02 23:44:53
【问题描述】：

我认为这是可能的，因为有大量类似的问题（已解决）但似乎没有一个处理动态创建的 iframe。

基本上，我使用 jquery 创建一个临时 iframe 来加载文件（从通过 ajax 调用提供的文件路径），然后打开文件下载提示。

一切正常，但为了防止我的 DOM 被一堆 iframe 填充，我希望在下载文件后删除 iframe。

我的 iframe 创建代码：

$('<iframe class="downloadIFrame" src="'+data['url']+'"></iframe>').appendTo('body');

以及销毁它的代码（在“就绪”jquery 事件回调中）：

$('.downloadIFrame').live('load', function() { alert('loaded');$(this).remove(); });

我没有收到有关 iframe 已加载的警报，因此未调用它。有什么线索吗？

【问题讨论】：

第二个代码sn-p在哪里？它需要在第一个 sn-p 之前和/或在 .ready eventHandler 之外。
iframe 的创建在 .ready 之外的函数中，该函数从 onclick 处理程序中调用。

标签： jquery

【解决方案1】：

live 适用于事件冒泡机制，其中iframe load 事件不是用户操作触发的。所以你不能使用live 来处理iframe 加载事件。

另外，在设置 iframe 的 src 之前，您应该附加 iframe load 事件处理程序。这是为了避免在加载事件附加之前加载 iframe 的情况。

试试这个

$('<iframe class="downloadIFrame"></iframe>')
.appendTo('body')
.load(function(){
   $(this).remove();
}).attr("src", data['url']);

【讨论】：

谢谢，正如我在 margusholland 的回复中提到的，我认为它没有触发 onLoad 的原因是 iframe 中加载的文件类型不是文本。当我下载 txt 或 html 文件但 png 失败时弹出警报。回到绘图板:)
嘿 - 我不同意你的第二个说法。与图像不同，iFrame 仅在附加到 DOM 时才会被调用。

【解决方案2】：

不要使用现场监听器。

$('<iframe class="downloadIFrame" src="http://www.google.com/"></iframe>').appendTo('body');
$('.downloadIFrame').load(function() { alert('loaded');$(this).remove(); });

在 Webkit 中对我来说很好。

【讨论】：

我想，因为我正在动态创建 iframe，所以我必须实时进行。它仍然不起作用，但我有一种感觉，所以我猜这是因为响应标头不是 text/html 而是其他内容。我加载了 pdf 和 png 等，如果您尝试加载不是 html 的文件，它仍然有效吗？

【解决方案3】：

我会尝试将警报代码放在您创建的 iframe 的 dom 中 - 它有自己的 dom，因此有自己的事件层次结构等。

将其视为一个完全独立的页面。

【讨论】：

iframe 用于打开我尝试下载的文件（因为这些文件是从外部服务器提供的）。所以基本上 iframe 不包含网页，所以我不能把它放在那里。