javascript - HTML 元素未在 window.onload 上加载

Question

HTML 元素在 window.onload 上抛出 null。

根据研究，它应该加载。

function setData()
{
    document.getElementById("my").value = "set"; 
}

window.onload = setData();

Answer 1

如果执行以下操作，函数 setData() 将立即被调用，并且不会等待窗口加载。以下行执行右侧函数 (setData()) 并将其自身指定为 window.onload 监听器。然而，我们不想在这个阶段执行setData()。相反，我们希望在窗口完全加载后执行 setData()。

window.onload = setData();

相反，请按以下方式使用window.onload。这会将函数附加为 window.onload 监听器。当窗口加载完成时，它会执行函数体，这实际上是对 setData() 的调用。

window.onload = function () {
    setData();
}

运行代码:

<script>
    function setData() {
        document.getElementById("my").value = "set";
    }
    // document.addEventListener('readystatechange', event => {
    //     setData();
    // });
    window.onload = function () {
        setData();
    }

</script>

<textarea id="my"></textarea>

还有其他几个选项:

• 最后在 body 之后调用该函数(在创建 DOM 元素后执行)
• 使用 readystatechange 监听器(在文档准备就绪后执行)
• 使用jQuery $(document).ready()(文档准备好后执行)

这是另一个带有 readystatechange 事件监听器的运行示例:

<script>
    function setData() {
        document.getElementById("my").value = "set";
    }
    document.addEventListener('readystatechange', event => {
        setData();
    });

</script>

<textarea id="my"></textarea>