svelte <iframe on:load> does not trigger in all browsers

Describe the bug

iframes should trigger the onload event when they are finished loading, however in at least some browsers, an event handler for that event fails to trigger.

I have tested the following configurations:

Linux, Firefox, Svelte: works
Linux, Chromium, Svelte: doesn't work
Linux, Firefox, SvelteKit: doesn't work
Linux, Chromium, SvelteKit: doesn't work

The results were the same using npm run dev and npm run start/npm run preview, and also in the Svelte REPL.

I'm holding back on also reporting in the SvelteKit repo, as I was able to reproduce this using Svelte only in at least one case - let me know if I should create an issue there too.

Reproduction

Create a new Svelte(Kit) project (or skip this and paste the file contents below into a REPL):

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
# or
npm init svelte@next my-sveltekit-project
cd my-sveltekit-project

npm i

Replace the contents of src/App.svelte/src/routes/index.svelte with the following:

<iframe on:load={() => console.log("iframe loaded")} />

Run using npm run dev or do a full build; open the site in a browser. Not all browsers show "iframe loaded" in the console.

Logs

No response

System Info

System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
    Memory: 965.66 MB / 15.35 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.6.1 - ~/.nvm/versions/node/v16.6.1/bin/node
    npm: 8.1.4 - ~/.nvm/versions/node/v16.6.1/bin/npm
  Browsers:
    Chromium: 96.0.4664.45
    Firefox: 94.0
  npmPackages:
    rollup: ^2.3.4 => 2.60.1 
    svelte: ^3.0.0 => 3.44.2 
  npmPackages - SvelteKit version:
    @sveltejs/adapter-auto: next => 1.0.0-next.3 
    @sveltejs/kit: next => 1.0.0-next.201 
    svelte: ^3.44.0 => 3.44.2

REPL: running Svelte compiler version 3.44.2

Severity

annoyance

Nov 29 '21 17:11 SillyFreak

The same code is being sent to all browsers, so I suspect the Firefox vs Chrome difference is a race condition, depending on whether the event has already fired by the time the handler is attached.

Similarly, I suspect what's happening in SvelteKit is that the event handler isn't being attached until hydration, by which time the server-side rendered iframe has already loaded.

If you want to run code regardless of whether the iframe has already loaded by the time the event handler is attached, I would suggest writing an action that checks whether the iframe has already loaded, and if it has, then immediately call the callback - and if it hasn't, then attach a load event handler that then calls the callback.

Nov 29 '21 18:11 Conduitry

thanks for the response! I'll try frame.contentDocument.readyState, I'm already using an action in my real code anyway. -- Edit: unfortunately at least that's not the way - I don't want allow-same-origin...

The reason that I'd consider it a Svelte(Kit) bug is that the vanilla <iframe onload="..."> or the equivalent DOM manipulation works. But yeah, it's really low priority.

Nov 29 '21 20:11 SillyFreak

Wanted to see if there was an update for this issue? Looking at iframes with SvelteKit and thi seems it could be a blocker for a project my team and I are are working on.