时间戳

首页 > 解决方案 > 未在 window.onload 上加载 HTML 元素

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

问题描述

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

根据研究，它应该加载。

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

window.onload = setData();

标签： javascripthtml

解决方案

如果您执行以下操作，该函数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>

推荐阅读