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

[SillyFreak]

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

[Conduitry]

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.

[SillyFreak]

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.

[teds31]

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.

[sujeetjaiswara]

Any update on this?

[davidwieler]

Commenting as I ran into the same issue, used the workaround from @gi4no's commit.

I'm curious if Svelte 5's switch to use onload versus on:load will help with this...

[dummdidumm]

Closing in favor of #11046