window.onload无限触发原因排查？自动生成页面嵌入代码遇异常

我有一个含大量自动生成内容的网页（无法修改其HTML），常规流程是：

• 用户在页面上进行选择（如输入捐赠金额）
• 用户点击按钮加载个人信息（该按钮点击后约1-2秒才会加载输入框）

我写了自定义代码让用户能在点击按钮前输入信息，逻辑是：

1. 页面加载完成后，将mydiv插入到自动生成的内容之间
2. 用户选择选项时，将信息存入localStorage
3. 用户点击加载个人信息的按钮后，用setInterval每100ms尝试将localStorage中的值填入对应字段，成功后清除定时器

自定义代码如下：

<style>
    /* some styles */
</style>

<div id="mydiv">
    <span style="font-weight:bold; margin-left: 12px;">
        Please select an option
    </span>
    <div id="mydiv-options" style="margin-left: 14px;">
        <input id="getinfo-mydiv" type="radio" name="mydiv-question" onclick="setstorage(0)">
        </input>
        <label for="getinfo-mydiv">
            option1
        </label>
        <br>

        <input id="future-mydiv" type="radio" name="mydiv-question" onclick="setstorage(1)">
        </input>
        <label for="future-mydiv">
            option2
        </label>
        <br>

        <input id="already-mydiv" type="radio" name="mydiv-question" onclick="setstorage(2)">
        </input>
        <label for="already-mydiv">
            option3
        </label>
        <br>
        <div id="clear-selection" onClick="clearSelection()">
            Clear selection
        </div>
    </div>
</div>

<script>
    // some functions
    let repeatTryCheck = null
    function setstorage(x) {
       console.log("setstorage")
        window.localStorage.setItem('selected', x)
    }
    function tryClickInput() {
        console.log('tryClickInput')
        let elementLoadedAfterUserClicksButton = document.getElementById("some-input")
        if (elementLoadedAfterUserClicksButton == null) {
            return
        } else {
            clearInterval(repeatTryCheck)
        }
        // do stuff with the value from storage
    }
    function tryClickUntilLoaded() {
       console.log("tryClickUntilLoaded")
       repeatTryCheck = setInterval(tryClickInput, 100) // 10x per second
    }

    function placeBeforeGeneratedDiv() {
        console.log("placeBeforeGeneratedDiv")
        let comments = document.getElementById("generateddiv")
        comments.insertAdjacentElement('beforebegin', document.getElementById("mydiv"))
        document.getElementById("mydiv").style.display = "block"
    }
    var i = 0;
    function init() {
        console.log("init")
        placeBeforeGeneratedDiv() // place mydiv before generateddiv
        document.getElementById('button-to-load-personal-info').addEventListener('click', tryClickUntilLoaded)
        setstorage(null)
        console.log(i)
        i = i + 1
    }
    window.onload = init
</script>

目前遇到的问题是：绑定到window.onload的init函数被无限调用，该代码在其他页面运行正常，请求协助排查。

核心原因推测 #

1. DOM操作触发页面重渲染/onload重复触发
   placeBeforeGeneratedDiv函数将mydiv插入到自动生成的generateddiv之前，若页面自身的动态生成逻辑会在DOM变化时重新渲染，可能导致window.onload被重复触发，进而无限调用init。

2. 事件绑定重复添加引发连锁反应
   每次init执行时，都会给按钮添加一次click事件监听。若init被多次调用，按钮会绑定多个相同的处理器，点击后可能触发多次setInterval，甚至间接导致页面状态异常，进一步触发onload循环。

3. 目标DOM元素不存在导致的异常
   若页面加载完成时generateddiv还未生成，document.getElementById("generateddiv")会返回null，调用insertAdjacentElement会抛出错误。部分浏览器或页面的错误处理机制可能会重新触发window.onload，形成循环。

具体修复步骤 #

1. 给init添加执行锁，避免重复运行

在init开头添加判断，确保只执行一次：

var i = 0;
var hasInit = false; // 添加执行锁
function init() {
    if (hasInit) return; // 已执行过则直接返回
    hasInit = true;
    
    console.log("init")
    placeBeforeGeneratedDiv()
    document.getElementById('button-to-load-personal-info').addEventListener('click', tryClickUntilLoaded)
    setstorage(null)
    console.log(i)
    i = i + 1
}
window.onload = init

2. 优化DOM插入逻辑，避免异常

修改placeBeforeGeneratedDiv，先检查目标元素是否存在，不存在则延迟重试：

function placeBeforeGeneratedDiv() {
    console.log("placeBeforeGeneratedDiv")
    let comments = document.getElementById("generateddiv")
    if (!comments) {
        // 目标元素未生成时，延迟500ms重试（可根据实际调整次数/间隔）
        setTimeout(() => placeBeforeGeneratedDiv(), 500);
        return;
    }
    comments.insertAdjacentElement('beforebegin', document.getElementById("mydiv"))
    document.getElementById("mydiv").style.display = "block"
}

3. 改用DOMContentLoaded替代window.onload（可选）

DOMContentLoaded在DOM构建完成即触发，无需等待所有资源加载，能减少和页面自动生成逻辑的冲突：

// 替换原有的 window.onload = init
document.addEventListener('DOMContentLoaded', init);

4. 确保事件监听只绑定一次（可选）

添加事件监听时使用once: true选项，即使init重复执行，也只会绑定一次：

document.getElementById('button-to-load-personal-info').addEventListener('click', tryClickUntilLoaded, { once: true })

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