Svelte/SvelteKit props变化时iframe内嵌组件未更新问题咨询

• 你使用的[...slug].svelte属于全匹配动态路由，当页面跳转到符合该路由规则的不同路径时，SvelteKit会复用现有组件实例，不会销毁重建组件
• iframe属于原生特殊元素，部分场景下Svelte的属性diff逻辑会误判src未发生变化，跳过DOM更新，所以会出现后台能打印正确路径，但页面iframe未更新的情况

方案1：添加响应式key属性（优先推荐） #

给iframe标签绑定key属性为当前页面路径或iframe完整地址，强制路径变化时销毁重建iframe实例，从根源避免属性不更新的问题：

<script>
  import { page } from '$app/stores';
  export let data;
</script>

<iframe 
  key={$page.url.pathname}
  src={data.iframeUrl} 
  width="100%" 
  height="800"
  frameborder="0"
/>

方案2：手动赋值iframe src #

如果需要保留iframe的现有状态、不想重建实例，可以通过绑定DOM元素+响应式语句手动更新src：

<script>
  export let data;
  let iframeEl;
  // 监听iframe地址变化，手动赋值触发更新
  $: if (iframeEl && data.iframeUrl) {
    iframeEl.src = data.iframeUrl;
  }
</script>

<iframe 
  bind:this={iframeEl}
  width="100%" 
  height="800"
  frameborder="0"
/>

方案3：修正load函数执行逻辑 #

如果跳转时load函数未重新触发，可以在路由的+page.js/+page.ts文件中添加配置，强制路径变化时重新执行load：

// +page.js
export const load = async ({ params }) => {
  const iframeUrl = `/embedded-app/${params.slug.join('/')}`;
  return { iframeUrl };
};
// 新增配置，强制路由参数变化时重新执行load
export const options = {
  hydrate: true,
  ssr: true
};

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