14

我有一个 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>

前者似乎是标准的做法，但后者似乎一样好，也许更好，因为它会在脚本被击中时立即更新元素，只要它放在元素之后，我看不出有什么问题。

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

4

9 回答 9

17

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

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

优点是：

  1. 调用 $(document).ready() 的次数与您想注册要运行的其他代码一样多次 - 您只能设置一次 window.onload。
  2. $(document).ready() 操作会在 DOM 完成后立即发生 - window.onload 必须等待图像等。

我希望我不会成为在每个 JavaScript 问题上都建议 jQuery 的人，但这确实很棒。

于 2008-09-03T01:19:45.667 回答
10

我写了很多 Javascript，window.onload 是一种糟糕的方法。它很脆弱，一直等到页面的每个资产都加载完毕。因此，如果一个图像永远占用或资源直到 30 秒才超时，您的代码将不会在用户看到/操作页面之前运行。

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

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

查看：

于 2008-09-03T02:12:33.387 回答
5

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

于 2008-09-03T00:37:36.733 回答
3

一些 JavaScript 框架，例如mootools，允许您访问名为“domready”的特殊事件：

包含窗口事件“domready”，它将在 DOM 加载时执行。为了确保 DOM 元素在尝试访问它们的代码被执行时存在，它们应该被放置在 'domready' 事件中。

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});
于 2008-09-03T01:19:18.053 回答
2

IE 上的 window.onload 也等待二进制信息加载。这不是“何时加载 DOM”的严格定义。因此，在页面被认为已加载和脚本被触发之间可能会有很大的延迟。正因为如此，我建议您研究一个丰富的 JS 框架（原型/jQuery）来为您处理繁重的工作。

于 2008-09-03T01:25:34.467 回答
1

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

编辑：我可以倒过来。

在某些情况下，当您希望在用户从另一个页面点击后退按钮返回您的页面时评估您的脚本时，有必要使用内联脚本。

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

于 2008-09-03T01:13:00.893 回答
1

@极客

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

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

于 2008-09-03T01:15:52.260 回答
0

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

于 2008-09-03T00:39:25.700 回答
0

onLoad 因为在页面加载时判断运行的代码比阅读大量 html 以查找可能执行的脚本标记要容易得多。

于 2008-09-03T01:09:30.840 回答