javascript window.onload 不适用于非常简单的页面
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/18369255/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
window.onload not working for very simple page
提问by Eugene Kim
Hi I'm new to Javascript and I'm trying to get a function to remove some elements once the window has loaded.
嗨,我是 Javascript 的新手,我正在尝试获取一个函数来在窗口加载后删除一些元素。
Here is the HTML
这是 HTML
<html>
<head>
<title>Simple Quiz</title>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Quiz</h1>
<h2>Question</h2>
<p id="question"></p>
<form name="choices">
<fieldset>
<!-- insert questions here dynamically via javascript! -->
<label><input type="radio" name="choice" value="1st">First-class</label>
<label><input type="radio" name="choice" value="2day">2-day Air</label>
<label><input type="radio" name="choice" value="overnite">Overnight</label>
</fieldset>
</form>
</body>
</html>
The function removeQuestions() works fine when called in the console after the page has loaded but I can't seem to get it to work using the onload event for the window. Interestingly enough, it works on JSFiddle (found here) but not when I fire up the page locally in chrome. What am I not getting right? Thank you
在页面加载后在控制台中调用时,函数 removeQuestions() 工作正常,但我似乎无法使用窗口的 onload 事件使其工作。有趣的是,它适用于 JSFiddle(在此处找到),但当我在 chrome 中本地启动页面时则无效。我哪里不对?谢谢
Here is the script.js file:
这是 script.js 文件:
// JS executed after window has been loaded
function removeQuestions() {
var choices = document.forms.choices.elements[0].children;
// remove choices
while (choices.length > 0) {
var choice = choices[0];
choice.parentNode.removeChild(choice);
}
}
window.onload = removeQuestions();
回答by Lepidosteus
You are not assigning your function to window.onload
, you are calling your function, then assigning the result to window.onload
您不是将函数分配给window.onload
,而是调用函数,然后将结果分配给window.onload
Replace window.onload = removeQuestions();
with window.onload = removeQuestions;
替换window.onload = removeQuestions();
为window.onload = removeQuestions;
The browser expects a callback function to be in onload, so that it can call it whenever the window is loaded.
浏览器希望在 onload 中有一个回调函数,以便它可以在窗口加载时调用它。
window.onload = removeQuestions();
is equivalent to
window.onload = removeQuestions();
相当于
var result = removeQuestions(); // undefined, the function does not return anything
window.onload = result;
回答by sziraqui
In my case it did not work because I had set window.onload
in two scripts running on the same page. It took me time to realise this mistake because the first script had console.log messages but the second script did not have any. Browser loaded the second script after first script and my window.onload = somefunction was now set to a function without any console.log giveing me the impression that it is not working at all
就我而言,它不起作用,因为我在同一页面上运行window.onload
了两个脚本。我花了一些时间才意识到这个错误,因为第一个脚本有 console.log 消息,而第二个脚本没有。浏览器在第一个脚本之后加载了第二个脚本,我的 window.onload = somefunction 现在被设置为一个没有任何 console.log 的函数,给我的印象是它根本不起作用