blocks|key|2007909|text|这取决于您是否希望它在遇到脚本元素时运行，或者希望它在load事件触发时运行(在整个文档(包括图像)加载之后)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2007910|两者都不总是对的。|2007911|但是，总的来说，我避免将函数直接分配给onload，而倾向于使用addEventListener+(如果需要支持较旧的浏览器，则使用兼容性库)。|offset|length|style|CODE|2007912|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener^0|0|0|J|6|W|G|W|G|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@$F|U|G|V|H|I]|$F|W|G|X|H|I]]|9|@$F|Y|G|Z|1|10]]|A|$]]|$1|J|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

That depends on if you want it to run when the script element is encountered or if you want it to run when the load event fires (which is after the entire document (including such things as images) has loaded).

Neither is always right.

In general, however, I'd avoid assigning functions directly to <code>onload</code> in favour of using <a href="https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener" rel="nofollow"><code>addEventListener</code></a> (with compatibility libraries if I needed to support older browsers).

blocks|key|583434|text|当浏览器到达时，window.onload就会运行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|583435|window.addEventListener在运行窗口之前等待加载该窗口。|583436|通常，您应该执行第二个操作，但是您应该将一个事件侦听器附加到它，而不是定义函数。例如：|583437|window.addEventListener('load',+
++function()+{+
++++alert('hello!');
++},+false);|code-block|syntax|javascript|583438|entityMap^0|8|D|0|0|N|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|-4|5|6|7|Y|8|@]|D|@]|E|$]]]|P|$]]

<code>window.onload</code> just runs when the browser gets to it. 

<code>window.addEventListener</code> waits for the window to be loaded before running it. 

In general you should do the second, but you should attach an event listener to it instead of defining the function. For example:

<pre><code>window.addEventListener('load', 
 function() { 
 alert('hello!');
 }, false);
</code></pre>

blocks|key|3088500|text|这是关于MDN的文档。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3088501|根据该计划：|3088502|加载事件在文档加载过程结束时触发。此时，文档中的所有对象都在DOM中，所有图像和子框架都已完成加载。|blockquote|3088503|您的第一个代码片段将在浏览器在HTML中达到此位置后立即运行。|3088504|当DOM和所有图像完全加载时，第二个片段将触发弹出(请参阅规范)。|3088505|考虑到alert()函数，它在什么时候运行并不重要(它不依赖于window对象以外的任何东西)。但是，如果您想要操作DOM+-您肯定应该等待它正确加载。|style|CODE|3088506|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload|1|https://developer.mozilla.org/en/docs/DOM^0|2|8|0|0|0|0|0|0|3|7|V|6|1M|3|1|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|15|8|@]|9|@]|C|$]]|$1|I|3|J|5|6|7|16|8|@]|9|@]|C|$]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|C|$]]|$1|M|3|N|5|6|7|18|8|@$A|19|B|1A|O|P]|$A|1B|B|1C|O|P]]|9|@$A|1D|B|1E|1|1F]]|C|$]]|$1|Q|3|-4|5|6|7|1G|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

Here's the <a href="https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers.onload" rel="noreferrer">documentation on MDN</a>.

According to it:

<blockquote>
 The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.
</blockquote>

Your first snippet of code will run as soon as browser hit this spot in HTML.

The second snippet will trigger popup when the DOM and all images are fully loaded (see the specs).

Considering the <code>alert()</code> function, it doesn't really matter at which point it will run (it doesn't depend on anything besides <code>window</code> object). But if you want to manipulate the <a href="https://developer.mozilla.org/en/docs/DOM" rel="noreferrer">DOM</a> - you should definitely wait for it to properly load.

blocks|key|583457|text|等待加载DOM的原因是为了使您能够针对脚本之后加载的任何元素。如果您只是创建一个alert，这并不重要。但是，假设您的目标是脚本之后标记中的div，如果您不等到加载DOM树的那一段，就会得到一个错误。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|583458|如果您使用的是document.ready，那么window.onload是一个很好的替代方案。|583459|见此处：window.onload+vs+$(document).ready()|583460|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready^0|14|5|1Y|3|0|7|E|O|D|0|4|10|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|11|8|@]|D|@$9|12|A|13|1|14]]|E|$]]|$1|J|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

The reason for waiting for the DOM to be loaded is so that you can target any elements that load after your script. If you're just creating an <code>alert</code>, it doesn't matter. Let's say, however, you were targeting a <code>div</code> that was in your markup after your script, you would get an error if you don't wait until that piece of the DOM tree to load.

<code>document.ready</code> is a great alternative to <code>window.onload</code> if you're using jQuery.

See here: <a href="https://stackoverflow.com/questions/3698200/window-onload-vs-document-ready">window.onload vs $(document).ready()</a>

blocks|key|2007986|text|你有三种选择：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2007987|在脚本标记内部，解析后立即运行它。|ordered-list-item|2007988|在document.addEventListener(+"DOMContentLoaded",+function(){});内部，一旦DOM准备就绪，就会运行它。|offset|length|style|CODE|2007989|在window.onload+function(){})内部，一旦加载了所有页面资源，就会立即运行。|2007990|entityMap^0|0|0|1|1P|0|1|R|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$]]|$1|E|3|F|5|D|7|Q|8|@$G|R|H|S|I|J]]|9|@]|A|$]]|$1|K|3|L|5|D|7|T|8|@$G|U|H|V|I|J]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|N|$]]

You have three alternatives:

<ol>
<li>Directly inside the script tag runs it as soon as it is parsed.</li>
<li>Inside <code>document.addEventListener( "DOMContentLoaded", function(){});</code> will run it once the DOM is ready.</li>
<li>Inside <code>window.onload function(){})</code> will run as soon as all page resources are loaded.</li>
</ol>

blocks|key|3088561|text|其他的答案似乎都过时了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3088562|首先，将脚本放在顶部并使用window.onload是一种反模式。最好是IE时代遗留下来的，或者是对JavaScript和浏览器的错误理解。|offset|length|style|CODE|3088563|您只需将脚本移动到html的底部即可。|3088564|<html>
++<head>
+++<title>My+Page</title>
++</head>+
++<body>
++++content

++++<script+src="some-external.js"></script>
++++<script>
++++++some+in+page+code
++++</script>
++</body>
</html>|code-block|syntax|javascript|3088565|人们使用window.onload的唯一原因是他们错误地认为脚本需要进入head部分。因为事情是按照顺序执行的，如果您的脚本位于head部分，那么根据执行顺序的定义，主体和内容还不存在。|3088566|麻烦的解决办法是使用window.onload等待页面的其余部分加载。将脚本移到底部也解决了这个问题，现在不需要使用window.onload了，因为您的主体和内容已经加载了。|3088567|更现代的解决方案是在脚本上使用defer标记，但是要使用脚本都必须是外部的。|3088568|<head>
++++<script+src="some-external.js"+defer></script>
++++<script+src="some-other-external.js"+defer></script>
</head>|3088569|这样做的好处是浏览器将立即开始下载脚本，并将按照指定的顺序执行脚本，但它将等待执行它们，直到页面加载、不需要window.onload或更好但仍然不需要的window.addEventListener('load',+...之后。|3088570|entityMap^0|0|D|D|0|0|0|4|D|10|4|0|A|D|1M|D|0|F|5|0|0|1I|D|25|Z|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|14|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|15|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|16|8|@$D|17|E|18|F|G]|$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1B|8|@$D|1C|E|1D|F|G]|$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1G|8|@$D|1H|E|1I|F|G]]|9|@]|A|$]]|$1|U|3|V|5|L|7|1J|8|@]|9|@]|A|$M|N]]|$1|W|3|X|5|6|7|1K|8|@$D|1L|E|1M|F|G]|$D|1N|E|1O|F|G]]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1P|8|@]|9|@]|A|$]]]|Z|$]]

The other answers all seem out of date
First off, putting scripts at the top and using <code>window.onload</code> is an anti-pattern. It's left over from IE days at best or mis-understandings of JavaScript and the browser at worst.
You can just move your scripts the the bottom of your html
<pre class="lang-html prettyprint-override"><code>&lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;My Page&lt;/title&gt;
 &lt;/head&gt; 
 &lt;body&gt;
 content

 &lt;script src=&quot;some-external.js&quot;&gt;&lt;/script&gt;
 &lt;script&gt;
 some in page code
 &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>
The only reason people used <code>window.onload</code> is because they mistakenly believed scripts needed to go in the <code>head</code> section. Because things are executed in order if your script was in the head section then the body and your content didn't yet exist by definition of execute in order.
The hacky workaround was to use <code>window.onload</code> to wait for the rest of the page to load. Moving your script to the bottom also solved that issue and now there's no need to use <code>window.onload</code> since your body and content will have already been loaded.
The more modern solution is to use the <code>defer</code> tag on your scripts but to use that your scripts need to all be external.
<pre class="lang-html prettyprint-override"><code>&lt;head&gt;
 &lt;script src=&quot;some-external.js&quot; defer&gt;&lt;/script&gt;
 &lt;script src=&quot;some-other-external.js&quot; defer&gt;&lt;/script&gt;
&lt;/head&gt;
</code></pre>
This has the advantage that the browser will start downloading the scripts immediately and it will execute them in the order specified but it will wait to execute them until after the page has loaded, no need for <code>window.onload</code> or the better but still unneeded <code>window.addEventListener('load', ...</code>

In JavaScript, when I want to run a script once when the page has loaded, should I use <code>window.onload</code> or just write the script?

For example, if I want to have a pop-up, should I write (directly inside the <code>&lt;script&gt;</code> tag):

<pre><code>alert("hello!");
</code></pre>

Or:

<pre><code>window.onload = function() {
 alert("hello!");
}
</code></pre>

Both appear to run just after the page is loaded. What is the the difference?

When to use "window.onload"?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

在JavaScript中，当我想在页面加载后运行一次脚本时，应该使用window.onload还是只编写脚本？例如，如果我想有一个弹出，我应该写(直接在<script>标签内)：alert("hello!");或者：window.onload = function() { alert("hello!");}在加载...

问什么时候使用"window.onload"？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问什么时候使用"window.onload"？EN