直接在页面上写<script>...</script>和用 window.onload = function()，有什么区别吗？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 2583 days ago, the information mentioned may be changed or developed.

直接在页面上写<script>...</script>

<script type="text/javascript">
    document.getElementById('xxx').style.color="#ff0000";
</script>

和用 window.onload = function() 有区别吗？

<script>
    window.onload=function(){
    document.getElementById('xxx').style.color="#ff0000";
    }
</script>

13 replies • 2019-04-29 17:02:18 +08:00

dobelee

Apr 13, 2019 via Android

这个。。楼主有学过 js 吗？

Mutoo

Apr 13, 2019

在页面上直接写，会在 DOM 树边解释时边执行，此时的 DOM 树可能并不完整（#xxx 可能未被创建）。
而 window.onload 是一个事件回调函数，在 DOM 树被解析完成后触发执行。此时的 DOM 树是完整的（#xxx 已经创建）。

xupefei

Apr 13, 2019

onload is most often used within the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).

第一种写法在执行的时候 xxx 元素可能还没加载出来。

glouhao

Apr 13, 2019 via Android

事件啊，那个＝前面是事件，当我脱下裤子再尿出来和直接尿出来的区别。大概好像这意思，你百度吧，我是做 seo 的，不懂代码。

icanfork

Apr 13, 2019

window.onload 楼主按照英文字面意思理解即可解决你的疑问

icanfork

Apr 13, 2019

@glouhao 额，很多论坛里面我只有 7-8 成把握的问题我都不敢回复别人，因为怕有 3 成几率错了而误导了别人

FEDT

Apr 13, 2019 via iPhone

查下文档有这么难吗

caomu

Apr 13, 2019 via Android

借问一下，把 script 放在 body 最下面可以吗？

shuAS

Apr 13, 2019

@caomu 可以，此时页面 DOM 已经加载完毕

qiqi669

Apr 14, 2019

一个是当浏览器解析到这块代码的时候立刻执行，
另一个是等网页资源全部加载完成后执行，比如你网页有比较多的图片，那么图片没加载完成，js 代码也不会执行，只有全部加载完成后才会执行。

botian

Apr 14, 2019

。。。。建议楼主去好好学学 javascript 吧，这种问题专门来发帖的时间，看文档都看会了

sandersyao

Apr 22, 2019

同行还是那么刻薄，建议楼主可以把带这个 id 属性的标签写在这个 script 标签后面看看效果

dfourc

Apr 29, 2019

@sandersyao #12 不是这么刻薄，而是这问题太基础了百度一分钟的事