javascript - 如何停止空 iframe 在注入(inject)时触发加载事件？

Question

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

为了向用户反馈，我需要使用脚本来监听表单上的 load 或 error 事件，因为这有效地使整个 UX 脚本依赖，我只是注入(inject)框架并通过脚本添加表单的目标引用。

问题是框架一旦注入(inject)页面就会触发加载事件:default behaviour .

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

TL;DR:是否有任何方法可以修改或限定 iframe 以阻止它在注入(inject)时首先触发错误的加载事件？

我尝试过的

1. 没有src属性
2. src 设置为 about:blank(上面是隐含的)
3. src 设置为 #
4. src 设置为 javascript:void 0
5. src 设置为空数据-URI data:text/plain;base64,;
6. srcdoc 设置为空或接近空的字符串

Answer 1

这是不可能的，正如您所说，默认的 src 设置为 about:blank 并且任何其他值都将触发 load 事件或 error一个。

因此，最简洁的解决方案可能是仅在触发表单的提交事件时才开始监听这些事件:

const frame = document.createElement("iframe");
frame.name = "frame";
document.body.append(frame);

const form = document.querySelector("form");
form.addEventListener("submit", (evt) => {
  const controller = new AbortController();
  const { signal } = controller;
  const handler = (evt) => {
    console.log("Request", evt.type === "error" ? "failure" : "success");
    controller.abort(); // kill us and the other listener
  };
  frame.addEventListener("load", handler, { signal });
  frame.addEventListener("error", handler, { signal });
});

<form
  target=frame
  method=post
  action="https://stacksnippets.net/js">
<button>post it</button>
<textarea name=html>Some content</textarea>
</form>

但可能应该注意的是，要触发 error 事件，您需要响应浏览器无法在 iframe 中打开，并且浏览器可以打开很多东西在 iframe 中，而且，大多数服务器在遇到错误时确实会发送正确的 HTML 页面。所以在大多数情况下，这不会让您知道请求失败，即使是 404 错误也会触发 iframe 的 load 事件。

因此，如果您处于同源情况，最好的办法可能是使用 AJAX 来发出请求。从那里您可以检查响应的状态代码，甚至让服务器为您提供有用的信息，例如作为 JSON 响应。然后，您可以使用作为文本使用的响应填充 iframe 的 srcdoc。 (External fiddle 因为 StackSnippet 的 null-origined 帧不能发出同源请求)。