我应该使用window.onload还是脚本块？

Question

我有一个javascript函数,在调用DOM时会操作它(添加CSS类等).当用户更改表单中的某些值时,将调用此方法.首次加载文档时,我想调用此函数来准备初始状态(在这种情况下比在服务器端将DOM设置为正确的初始状态更简单).

是否更好的方法是使用window.onload来执行此功能,或者在我需要修改的DOM元素之后使用脚本块？对于这两种情况,为什么它更好？

例如:

function updateDOM(id) {
    // updates the id element based on form state
}

我应该通过以下方式调用它:

window.onload = function() { updateDOM("myElement"); };

要么:

<div id="myElement">...</div>
<script language="javascript">
    updateDOM("myElement");
</script>

前者似乎是执行它的标准方法,但后者似乎同样好,也许更好,因为它会在脚本被击中后立即更新元素,并且只要它放在元素之后,我没有看到它的问题.

有什么想法吗？一个版本真的比另一个好吗？

Answer 1

onload事件被认为是正确的方法,但如果你不介意使用javascript库,jQuery的$(document).ready()会更好.

$(document).ready(function(){
  // manipulate the DOM all you want here
});

优点是:

1. 您可以多次调用$(document).ready()来注册要运行的其他代码 - 您只能设置window.onload一次.
2. 一旦DOM完成,$(document).ready()动作就会发生 - window.onload必须等待图像等.

我希望我不会成为在每个JavaScript问题上建议jQuery的人,但它真的很棒.

Answer 2

我写了很多Javascript和window.onload是一种可怕的方法.它很脆弱,等待页面的每个资产都加载完毕.因此,如果一个图像需要永久保存,或者资源在30秒内没有超时,则在用户可以查看/操作页面之前,您的代码将无法运行.

此外,如果另一段Javascript决定使用window.onload = function(){},您的代码将被吹走.

在页面准备就绪时运行代码的正确方法是等待您需要更改的元素已准备好/可用.许多JS库都将此作为内置功能.

查看:

• http://docs.jquery.com/Events/ready#fn
• http://developer.yahoo.com/yui/event/#onavailable

Answer 3

绝对使用onload。将脚本与页面分开放置，否则您将在以后尝试解开它们时会发疯。