SvelteKit中iframe的load事件无法触发问题排查

问题现象 #

加载本地userFiles/index.html的iframe可正常显示，但无法捕获其load事件（控制台无预期输出）；仅在HMR热模块替换更新代码时，load函数才会触发。相同代码在纯Svelte项目中可正常运行，推测为SvelteKit环境特有问题。

原代码 #

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

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

    iFrame.addEventListener('load', () => {
      console.log('loaded!');  // 预期输出但未出现
    });
  });
</script>

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

原因分析 #

SvelteKit默认启用服务端渲染（SSR），或iframe的src资源在onMount钩子执行前就已加载完成——当你在onMount中添加load事件监听时，该事件已经触发过，自然无法捕获。而HMR更新时组件重新挂载，此时iframe可能处于未加载状态，因此事件能被正常捕获。

解决方案 #

方案1：使用Svelte原生事件绑定（推荐） #

直接在iframe元素上通过on:load绑定事件，Svelte会自动处理事件监听的时机，无需手动管理：

<script lang="ts">
  function handleIframeLoad() {
    console.log('loaded!');
  }
</script>

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

方案2：手动监听时检查加载状态 #

若必须使用手动事件监听，先判断iframe是否已加载完成，若已完成则直接执行回调，再添加监听（同时记得清理监听避免内存泄漏）：

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

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

    const handleLoad = () => {
      console.log('loaded!');
    };

    // 检查iframe是否已加载完成
    if (iFrame.contentDocument?.readyState === 'complete') {
      handleLoad();
    } else {
      iFrame.addEventListener('load', handleLoad);
      // 组件销毁时移除监听
      return () => iFrame.removeEventListener('load', handleLoad);
    }
  });
</script>

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

内容的提问来源于stack exchange，提问作者Abhay Salvi