SvelteKit中外部JS调用失效：点击输入框无响应

你的问题核心在于没有适配SvelteKit的组件生命周期和事件处理逻辑，直接用原生JS的window.onload和document.getElementById方式在Svelte组件中会存在加载时机不匹配、元素获取不可靠的问题。以下是修复后的完整方案：

重构address.svelte代码 #

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

    // 用Svelte的方式绑定输入框元素
    let addressInput;
    // 标记外部脚本是否加载完成
    let daumScriptLoaded = false;

    onMount(async () => {
        // 动态加载Daum邮编脚本，确保加载完成后再执行逻辑
        if (!window.daum) {
            const script = document.createElement('script');
            script.src = '//t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js';
            
            await new Promise(resolve => {
                script.onload = resolve;
                document.head.appendChild(script);
            });
            
            daumScriptLoaded = true;
        } else {
            daumScriptLoaded = true;
        }
    });

    // 点击输入框的处理函数
    function openPostcode() {
        if (!daumScriptLoaded) return;
        
        new window.daum.Postcode({
            oncomplete: (data) => {
                addressInput.value = data.address;
            }
        }).open();
    }
</script>

<div class="field">
    <div class="container">
        <div class="card">
            <div class="content">
                <h1>IGIS</h1>
                <h2>Address Here</h2>
                <br/>
                <form>
                    <div>
                        <label class="label" for="address">소재지(주소)</label>
                        <br/>
                        <input 
                            class="input" 
                            id="address" 
                            type="text" 
                            name="address" 
                            placeholder=" " 
                            readonly 
                            required
                            bind:this={addressInput}
                            on:click={openPostcode}
                        >
                    </div>
                    <button type="submit">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

关键修改说明 #

• 移除svelte:head中的脚本：改为在onMount生命周期中动态加载，确保脚本加载完成后再执行邮编相关逻辑，避免daum对象未定义的错误。
• 用bind:this获取元素：代替原生的document.getElementById，这是Svelte官方推荐的组件内获取DOM元素的方式，更可靠且适配组件的渲染周期。
• 直接绑定on:click事件：替换手动添加事件监听的方式，Svelte会自动处理事件的绑定与销毁，避免内存泄漏。
• 增加脚本加载状态判断：防止在脚本未加载完成时触发点击逻辑，保证代码的稳定性。

为什么原来的代码不生效？ #

1. window.onload是页面全局加载完成的事件，而Svelte组件可能在window.onload之后才挂载，此时document.getElementById找不到目标元素；或者组件挂载前window.onload已经触发，导致事件监听根本没绑定上。
2. 直接操作DOM不符合Svelte的组件化思想，组件的渲染状态变化时，原生DOM操作容易出现元素不存在的异常。

内容的提问来源于stack exchange，提问作者배상일