如何停止在注入时触发加载事件的空 iframe？

Posted 2023-03-05

【中文标题】如何停止在注入时触发加载事件的空 iframe？

【英文标题】：How to stop an empty iframe triggering a load event on injection?

【发布时间】：2013-03-20 06:35:56

【问题描述】：

我是using an empty frameto handle pseudo-asynchronous form submission。对于那些不熟悉该技术的人，这个想法是在表单的target 属性中引用框架的name 属性，这样表单的action 的URI 在框架中解析并且用户体验是' t被打断了。

为了反馈给用户，我需要使用脚本来监听表单上的 load 或 error 事件，因为这实际上使整个 UX 脚本依赖于，我只注入框架并添加表单的目标引用通过脚本。

问题是框架一注入页面就会触发加载事件：default behaviour。

我可以使用 jQuery 的 one 方法和 e.stopImmediatePropagation() (here) 来缓解这种情况，或者我可以注入框架并然后绑定事件 (here)。但是这两个选项都非常违反直觉——代码当然需要注释以避免看起来像一个错误。

TL;DR：有什么方法可以修改或限定 iframe 以阻止它在注入时触发错误的加载事件？

我尝试过的

没有src属性 src 设置为 about:blank（上面是隐含的） src 设置为 # src 设置为 javascript:void 0 src 设置为空数据-URI data:text/plain;base64,; srcdoc 设置为空或接近空的字符串

【参考方案1】：

First put the iframe into the document, then register the listener:

var e = $('<iframe>');
e.appendTo('body');
e.on('load', function()
  alert('Loaded!')
);

【讨论】：

这似乎只在 Chrome 中有效。在 Firefox 和 IE11 上，页面加载时会弹出“已加载”警报...