Load event only fires after all iframes load?

Open mrj opened this issue 3 years ago • 1 comments

MDN URL

https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

What specific section or headline is this issue about?

No response

What information was incorrect, unhelpful, or incomplete?

Both the HTML Standard and the MDN doc page for the load event do not state whether a page's load event only fires after all its iframes have fully loaded, because they are regarded as "dependent resources".

What did you expect to see?

Clarity.

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

MDN metadata

Page report details

Folder: en-us/web/api/window/load_event
MDN URL: https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event
GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/api/window/load_event/index.md
Last commit: https://github.com/mdn/content/commit/8318078e0cf65cd4d56e80376c03019dcb292dc1
Document last modified: 2022-09-13T20:24:51.000Z

Nov 08 '22 08:11 mrj

Hi @mrj thanks for opening this one. It looks like the iframe is regarded as a dependent resource, you can try out the following demo:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Window load event</title>
  </head>
  <body>
    <iframe
      id="inlineFrameExample"
      title="Inline Frame Example"
      width="300"
      height="200"
      src="https://www.openstreetmap.org/export/embed.html?bbox=-0.004017949104309083%2C51.47612752641776%2C0.00030577182769775396%2C51.478569861898606&layer=mapnik"
    >
    </iframe>
    <script>
      const frame = document.getElementById("inlineFrameExample");

      frame.addEventListener("load", (event) => {
        console.log(
          `[Frame] Event type: ${event.type} time: ${event.timeStamp}`
        );
      });

      document.addEventListener("readystatechange", (event) => {
        console.log(
          `[readystatechange] "${document.readyState}", time: ${event.timeStamp}`
        );
      });

      window.onload = (event) => {
        console.log(
          `[Window] Event type: ${event.type} time: ${event.timeStamp}`
        );
      };
    </script>
  </body>
</html>

The window load event is fired after the iframe has loaded. You can find more info about document readiness here.

Nov 11 '22 12:11 bsmth