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
});

优点是：

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

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

Answer 2

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

另外，如果另一段Javascript决定使用window.onload = function（）{}，那么你的代码就会被吹走。

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

退房：

Answer 3

绝对使用onload。保持你的脚本与你的页面分开，否则你会发疯，试图在以后解开它们。

Answer 4

某些JavaScript框架（例如mootools）可让您访问名为“domready”的特殊事件：

包含窗口Event'domready'，它将在DOM加载时执行。为了确保在执行访问它们的代码时存在DOM元素，它们应该放在'domready'事件中。
window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

Answer 5

IE上的

window.onload等待加载二进制信息。它不是“何时加载DOM”的严格定义。因此，在感知页面被加载和脚本被触发之间可能存在显着的延迟。因此，我建议您查看其中一个丰富的JS框架（prototype / jQuery）来处理繁重的工作。

Answer 6

以下是关于此主题的非常好的文章：

http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html

Answer 7

虽然我同意其他关于使用window.onload的说法，如果可能的话干净代码，我很确定当用户点击IE中的后退按钮时会再次调用window.onload，但是不会再次调用在Firefox中。（除非他们最近改变了）。

编辑：我可以倒退。

在某些情况下，当您希望在用户从其他页面点击后退按钮，返回页面时评估脚本时，必须使用内联脚本。

欢迎对此答案进行任何更正或补充......我不是javascript专家。

Answer 8

@The Geek

我很确定当用户点击IE中的后退按钮时会再次调用window.onload，但是在Firefox中不会再次调用。（除非他们最近改变了它。）

在Firefox中，无论您如何导航到页面，都会在DOM完成加载时调用onload。

Answer 9

我的观点是前者因为你只能有1个window.onload函数，而内联脚本块你有 n 号。

Answer 10

onLoad因为在页面加载时告诉代码运行要容易得多，而不是通过查找可能执行的脚本标记的html内容来读取。

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

10 个答案: