Javascript window.onload不等待DOM加载
[英]Javascript window.onload Not Waiting for DOM to Load
问题描述
I am somewhat new to programming and have been working through the Head First HTML5 Programming book. 
我对编程有些陌生，并且一直在研究《 Head First HTML5编程》一书。 On page 65, they have an exercise that helps you insert a javascript function into the HTML head that will change the text located at bullet points in the body of the page. 在第65页上，他们进行了一项练习，可以帮助您将javascript函数插入HTML头中，从而更改位于页面正文中项目符号点的文本。 When I open the HTML file in the browser, the page loads, but the content from the Javascript function isn't added to the bullet points. 当我在浏览器中打开HTML文件时，页面会加载，但是Javascript函数中的内容不会添加到项目符号中。 I have determined it's because the script is running before the DOM is complete because when I change the book's code to <body onload="addSongs()"> , the page loads correctly. 我确定这是因为脚本在DOM完成之前就已经在运行，因为当我将书的代码更改为<body onload="addSongs()"> ，页面可以正确加载。
Here's the code from the book (that doesn't seem to work): 这是本书中的代码（似乎无效）：
<!doctype html>
<html>
<head>
<title>My Playlist</title>
<meta charset="utf-8">
<script>
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
window.onload = addSongs;
}
</script>
</head>
<body>
<h1> My Awesome Playlist! </h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
</body>
</html>
I have read through different posts and many people suggested using JQuery (which I'm hoping to learn in the next few months), but I'm just curious as to whether the window.onload = function; 我已经阅读了不同的文章，很多人建议使用JQuery（我希望在接下来的几个月中学习），但是我只是对window.onload = function;是否感到好奇window.onload = function; has been deprecated since this book was published or if I am making a mistake somewhere. 自从本书出版以来，或者如果我在某个地方犯了错误，就已弃用。 A lot of the exercises in this book use this principle and I can't move forward until I figure this out. 本书中的许多练习都使用了这一原理，直到我弄清楚这一点，我才能继续前进。 Any suggestions or different approaches are appreciated. 任何建议或不同的方法表示赞赏。
Thanks! 谢谢！
3 个解决方案
解决方案1
3 2013-02-06 12:14:00
You need to move the line: 您需要移动这行：
window.onload = addSongs;
To outside the function. 到外部功能。
"I have determined it's because the script is running before the DOM is complete"
The script is running, but all it does is declare a function, it doesn't ever call it (because the aforementioned line is in the wrong place). 该脚本正在运行，但它所做的只是声明一个函数，它从未调用过它（因为上述行在错误的位置）。
解决方案2
0 2013-02-06 12:16:32
it's just a typo. 这只是一个错字。
you put window.onload = addSong; 你把window.onload = addSong; in the definition of the function addSong. 在函数addSong的定义中。 so window.onload will never be set, as addSong will never be called. 因此将永远不会设置window.onload，因为永远不会调用addSong。
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
}
window.onload = addSongs; //move this line out of function definition.
解决方案3
0 2013-02-06 12:22:30
You need to move window.onload = addSongs; 您需要移动window.onload = addSongs; after define the function, not before it. 在定义函数之后，而不是在函数之前。 like this: 像这样：
<!doctype html>
<html>
<head>
<title>My Playlist</title>
<meta charset="utf-8">
<script>
function addSongs() {
var song1 = document.getElementById("song1");
var song2 = document.getElementById("song2");
var song3 = document.getElementById("song3");
song1.innerHTML = "Blue Suede Strings, by Elvis Pagely";
song2.innerHTML = "Great Objects on Fire, by Jerry JSON Lewis";
song3.innerHTML = "I Code the Line, by Johnny Javascript";
}
window.onload = addSongs;
</script>
</head>
<body>
<h1> My Awesome Playlist! </h1>
<ul id="playlist">
<li id="song1"></li>
<li id="song2"></li>
<li id="song3"></li>
</ul>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.