SvelteKit表单中iframe生成变量无法在脚本外访问的求助

问题根源 #

你当前的写法中，{#browser}块内的<script>是独立于组件作用域的浏览器端脚本，里面声明的ticketid只存在于该脚本的局部作用域，和模板中引用的ticketid并非同一个变量，因此模板无法获取到iframe返回的值。

最佳解决方案：组件级响应式变量 + onMount #

直接在组件的主<script>标签中声明响应式变量，利用onMount（仅在浏览器端执行）监听iframe的done事件，这样变量属于组件作用域，模板和表单可以直接访问，值更新时会自动同步到UI。

<script>
    import { onMount } from 'svelte';
    import { browser } from '$app/environment';

    // 声明组件级响应式变量，模板可直接引用
    let ticketid = '';

    onMount(() => {
        // onMount仅在浏览器环境执行，无需额外判断
        elements.on('done', (event) => {
            const responseData = event.data;
            ticketid = responseData.id; // 赋值后自动触发UI更新
            console.log("Ticket:", ticketid);
        });
    });
</script>

<form method="POST" action="/your-action">
    <h5>Ticket: {ticketid}</h5>
    <!-- 隐藏输入框会自动同步ticketid的值，提交时包含在FormData中 -->
    <input type="hidden" name="ticketid" value={ticketid}>
    
    <!-- 其他表单元素 -->
    <button type="submit">提交</button>
</form>

替代方案：全局变量（不推荐） #

如果因特殊需求必须保留{#browser}内的脚本，可以将变量挂载到window全局对象，再在组件脚本中监听其变化。但全局变量容易引发命名冲突，仅作为临时解决方案：

<script>
    import { browser } from '$app/environment';
    let ticketid = '';

    // 监听全局变量变化，同步到组件变量
    if (browser) {
        $: ticketid = window.ticketid ?? '';
    }
</script>

<form method="POST" action="/your-action">
    {#if browser}
    <script>
        window.ticketid = '';
        
        elements.on('done', (event) => {
            const responseData = event.data;
            window.ticketid = responseData.id;
            console.log("Ticket:", window.ticketid);
        });
    </script>
    {/if}

    <h5>Ticket: {ticketid}</h5>
    <input type="hidden" name="ticketid" value={ticketid}>
    <button type="submit">提交</button>
</form>

直接传递到page.server的补充说明 #

除了通过隐藏输入框提交，也可以在表单提交时用SvelteKit的enhance动作或手动fetch请求，将ticketid作为参数传递：

<script>
    import { enhance } from '$app/forms';
    // ... 其他代码

    async function handleSubmit({ formData, action }) {
        // 手动添加ticketid到FormData
        formData.append('ticketid', ticketid);
        const response = await fetch(action, {
            method: 'POST',
            body: formData
        });
        // 处理响应
        return response;
    }
</script>

<form method="POST" action="/your-action" use:enhance={handleSubmit}>
    <!-- ... 表单内容 -->
</form>

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