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

StackOverflow https://stackoverflow.com/questions/40966

  •  09-06-2019
  •  | 
  •  

题

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

前者似乎是执行此操作的标准方法，但后者似乎同样好，也许更好，因为一旦命中脚本，它就会更新元素，并且只要将其放置在元素之后，我不觉得有什么问题。

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

有帮助吗？

解决方案

绝对用 onload. 。将脚本与页面分开，否则稍后您会因为试图将它们分开而发疯。

其他提示

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 的人，但这确实很棒。

我写了很多 Javascript，window.onload 是 糟糕的 方法来做到这一点。它很脆，等到 每一个 页面资源已加载。因此，如果一张图像需要很长时间或者资源直到 30 秒才超时，那么在用户可以查看/操作页面之前，您的代码将不会运行。

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

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

查看：

一些 JavaScript 框架，例如 穆工具, ，让您可以访问名为“domready”的特殊事件：

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

window.addEvent('domready', function() {
  alert("The DOM is ready.");
});

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

这是关于这个主题的一篇非常好的文章：

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

@极客

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

在火狐浏览器中， onload 当 DOM 完成加载时调用，无论您如何导航到页面。

虽然我同意其他人关于在可能的情况下使用 window.onload 来获得干净代码的观点，但我非常确定当用户在 IE 中单击后退按钮时， window.onload 将再次被调用，但在 Firefox 中不会再次被调用。（除非他们最近改变了）。

编辑：我可以把它倒过来。

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

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

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

onLoad 是因为与必须向下阅读大量 html 寻找可能执行的脚本标记相比，知道页面加载时运行的代码要容易得多。

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top