SvelteKit中使用<svelte:head>动态注入脚本页面导航失效问题

方法1：使用组件生命周期手动创建脚本元素 #

这是最可靠的方案，利用Svelte的onMount钩子在客户端（包括手动导航场景）动态创建并插入脚本，浏览器会正常执行脚本内容。

代码示例：

<script>
    import { onMount } from 'svelte';

    // 可根据页面需求动态生成脚本内容
    const scriptContent = 'console.log("Some script executed")';

    onMount(() => {
        // 创建script元素
        const script = document.createElement('script');
        script.textContent = scriptContent;
        
        // 插入到页面head中
        document.head.appendChild(script);

        // 组件销毁时移除脚本，避免重复执行或内存泄漏
        return () => {
            document.head.removeChild(script);
        };
    });
</script>

方法2：加载外部第三方脚本（URL形式） #

如果需要注入的是外部URL的第三方脚本，同样用onMount创建元素并设置src属性：

<script>
    import { onMount } from 'svelte';

    // 外部脚本URL，可动态赋值
    const scriptUrl = 'https://example.com/third-party-script.js';

    onMount(() => {
        const script = document.createElement('script');
        script.src = scriptUrl;
        script.async = true; // 根据脚本需求设置async/defer
        document.head.appendChild(script);

        return () => {
            document.head.removeChild(script);
        };
    });
</script>

原方案失效原因 #

直接访问页面时，脚本是通过服务端渲染静态输出到HTML中的，浏览器会正常执行；但手动导航（客户端路由跳转）时，SvelteKit是动态更新DOM，通过{@html}插入的<script>标签属于innerHTML操作，浏览器出于安全和性能考虑，不会自动执行这类动态插入的脚本。

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