dom - window.onload 似乎在加载 DOM 之前触发(JavaScript)

标签 dom dom-events getelementbyid onload onload-event

我在使用 window.onload 时遇到问题和 document.onload事件。我读到的所有内容都告诉我,在 DOM 完全加载其所有资源之前,这些不会触发,这对我来说似乎不会发生:

我在 Chrome 4.1.249.1036 (41514) 和 IE 8.0.7600.16385 中尝试了以下简单页面,结果相同:都显示消息“失败!”,表明 myParagraph未加载(因此 DOM 似乎不完整)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
        <script type="text/javascript">
            window.onload = doThis();
            // document.onload gives the same result

            function doThis() {
                if (document.getElementById("myParagraph")) {
                    alert("It worked!");
                } else {
                    alert("It failed!");
                }
            }
        </script>
    </head>

    <body>
        <p id="myParagraph">Nothing is here.</p>
    </body>
</html>

我在外部 .js 文件中使用了比这更复杂的脚本,但这说明了问题。我可以通过 window.onload 让它工作设置一个半秒的计时器来运行 doThis() ,但这似乎是一个不雅的解决方案,并没有回答为什么 window.onload 的问题。似乎并没有按照每个人所说的去做。另一种解决方案是设置一个计时器来检查 DOM 是否已加载,如果没有,它只会在半秒后调用自己(因此它会一直检查直到 DOM 加载),但这对我来说似乎过于复杂。

有没有更合适的事件可以使用?

最佳答案

在加载窗口时,主体尚未加载,因此您应该按以下方式更正代码:

<script type="text/javascript">
    window.onload = function(){
        window.document.body.onload = doThis; // note removed parentheses
    };

    function doThis() {
        if (document.getElementById("myParagraph")) {
            alert("It worked!");
        } else {
            alert("It failed!");
        }
    }
</script>

经测试可在 FF/IE/Chrome 中工作,但考虑处理 document.onload也是。

如前所述,使用 js-frameworks 将是一个更好的主意。

关于dom - window.onload 似乎在加载 DOM 之前触发(JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2485244/

相关文章:

Javascript map 取消引用

javascript - 如何通过索引(例如在数组中)引用特定的 jquery ui 选项卡

Javascript只能访问内表

java - 安卓,org.w3c.dom : No validating DocumentBuilder implementation available

javascript - 在重定向时显示加载图像

javascript - onkeydown 事件变量打破 EventListener 代码

javascript - 通过 onclick 更改项目值不起作用

javascript - 如何通过自动填充检测是否已填写任何表单元素?

javascript - 如何使多个 document.getElementById() 在同一页面上工作?

javascript - 从宽度 : 100%; to width: 1000 px; when <1000px (Javascript) 更改 div