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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 11:39:55  来源:igfitidea点击:

window.onload not working for very simple page

javascript

提问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.onloadin 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 的函数,给我的印象是它根本不起作用