在 Firefox 中与 <iframe> 一起使用时 addEventListener("load") 出现问题

Question

我有一个iframe，它是form 的目标。当按下submit 时，iframe 应该删除main 元素。这在除 Firefox 之外的所有主要浏览器中都可以正常工作，其中 main 在页面加载时立即被删除。

这只是 Firefox 中的一个错误，还是我遗漏了什么？

---

document.addEventListener("DOMContentLoaded", _ => {
  
  // Create an iframe and submit a form to it
  // ========================================

  const form = document.forms[0]
  form.setAttribute("target", "Response")

  const iframe = Object.assign(document.createElement("iframe"), {
    name: "Response"
  })
  iframe.hidden = true
  document.body.appendChild(iframe)

  iframe.addEventListener("load", () => {
    const main = document.querySelector("body > main")

    main.remove()

    iframe.hidden = false
  })
})

<main>
  <form action=https://script.google.com/macros/s/AKfycbzz-KveHder1A3CX8GcqZI6GR2MQj66PDRWNKoatIET_LXNqQs/exec method=get>
    <fieldset>
      <legend>Foobar</legend>
      <label><input type=radio name=Foobar value=Foo>Foo</label><br>
      <label><input type=radio name=Foobar value=Bar>Bar</label><hr>
      <input type=submit value=Submit>
    </fieldset>
  </form>
</main>

Answer 1

当空白 iframe 加载而其他 iframe 未加载时，听起来 Firefox 正在触发 load。

我想到了几种方法来解决这个问题：

• 您可以检查 location 的 iframe 以确保它是您所期望的

• 只有在表单上看到submit 事件后，才能设置load 处理程序。 submit 事件肯定会在与之相关的load 之前，因为submit 发生在表单提交之前。

对我来说，第二种方式似乎是要走的路。

---

重新使用location，粗略地说（见 cmets）：

iframe.addEventListener("load", () => {
  // *** Only process the event if the iframe's location is the expected origin
  if (String(iframe.contentWindow.location).startsWith("https://script.google.com")) {
    const main = document.querySelector("body > main")

    main.remove()

    iframe.hidden = false
  }
})

（startsWith 有点新，但必要时可以轻松填充。）