Search code examples
typescriptiframesveltesveltekitsvelte-3

SvelteKit iFrame load event not firing

I have an iframe which is loading a local index.html file and it does loads the page without any problems, but what I want is to capture an onload event of the iframe and it is not doing so. Here is the code:

<script lang="ts">
  import { onMount } from 'svelte';

  onMount(() => {
    const iFrame = <HTMLIFrameElement>document.getElementById('frame');

    iFrame.addEventListener('load', () => {
      console.log('loaded!');  // it should print this!
    });
  });
</script>

<iframe
    src="userFiles/index.html"
    class="bg-[#ececec] w-full h-full"
    frameborder="0"
    title="Project"
    id="frame"
    style="color-scheme: dark;"
/>

As you can see, there is nothing on the console:

enter image description here

However, if I write something or just update the code & hit Ctrl + S, then due to hmr it actually triggers the onload function!

enter image description here

I don't know why is this happening. This seems so strange to me. Here is the file structure, if you want to know:

enter image description here

However, the same code works on Svelte, so I suppose it is something related to SvelteKit...

Edit:

It really seems something is there with SvelteKit only. I created two new svelte and sveltekit apps forked from the official repos on codesandbox and there too onload on iframe is working on svelte only and not with the sveltekit. Here's the link:

Check the console -> Svelte | SvelteKit

Solution

  • It seems that that the iframes onload event is already passed when you attach it on the onmount, if you change the iframe srcdoc, the event is captured and the console message is printed.

    Try to set the content of the iframe via code after the onload event listener is attached, and it should work.