Проблема с addEventListener ("load") при использовании с <iframe>in Firefox

Question

У меня есть iframe, который является целью для form. iframe должен удалить элемент main при нажатии submit. Это работает, как и ожидалось, во всех основных браузерах, кроме 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

Похоже, Firefox вызывает load, когда пустой iframe загружается, а остальные нет.

Для решения этой проблемы на ум приходит пара подходов:

• Вы можете проверить location из iframe, чтобы убедиться, что это то, что вы ожидаете

• Вы можете установить обработчик load только после того, как увидите submit событие в форме. Событие submit определенно будет до load, связанного с ним, потому что submit происходит до отправки формы.

Мне кажется, что второй путь похож на go.

---

Re с использованием location, в грубом выражении (см. Комментарии):

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 немного новов sh, но легко заполняется при необходимости.)