提问人:Mike Stone 提问时间:9/3/2008 最后编辑:canolucasMike Stone 更新时间:5/9/2015 访问量:7773
我应该使用 window.onload 还是脚本块?
Should I use window.onload or script block?
问:
我有一个 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
我的看法是前者,因为您只能拥有 1 个 window.onload 函数,而内联脚本块您有一个 n 个数字。
onLoad,因为当页面加载时,要知道运行什么代码要比通过大量 html 来寻找可能执行的脚本标签要容易得多。
虽然我同意其他人关于尽可能使用 window.onload 进行干净代码的观点,但我很确定当用户在 IE 中点击后退按钮时会再次调用 window.onload,但在 Firefox 中不会再次调用。(除非他们最近改变了它)。
编辑:我可以倒过来。
在某些情况下,当您希望在用户从另一个页面点击后退按钮返回到您的页面时评估脚本时,有必要使用内联脚本。
欢迎对此答案进行任何更正或补充...我不是 javascript 专家。
@The极客
我很确定当用户在IE中点击后退按钮时,window.onload会再次被调用,但在Firefox中不会再次被调用。(除非他们最近改变了它)。
在 Firefox 中,当您以 DOM 的方式完成加载时调用,无论您如何导航到页面。onload
一些 JavaScript 框架(如 mootools)允许您访问名为“domready”的特殊事件:
包含窗口事件“domready”,该事件将在加载 DOM 时执行。为了确保在执行尝试访问它们的代码时 DOM 元素存在,应将它们放在“domready”事件中。
window.addEvent('domready', function() { alert("The DOM is ready."); });
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 的人,但它真的很棒。
IE 上的 window.onload 也会等待二进制信息加载。它不是“加载 DOM 时”的严格定义。因此,在感知到页面加载和脚本被触发之间可能存在很大的滞后。正因为如此,我建议你研究一个丰富的JS框架(prototype / jQuery)来为你处理繁重的工作。
我写了很多 Javascript,window.onload 是一种糟糕的方法。它很脆弱,会等到页面的每个资产都加载完毕。因此,如果一个图像需要很长时间,或者资源直到 30 秒才超时,则在用户可以看到/操作页面之前,您的代码将不会运行。
此外,如果另一段 Javascript 决定使用 window.onload = function() {},您的代码将被吹走。
当页面准备就绪时,运行代码的正确方法是等待您需要更改的元素就绪/可用。许多 JS 库都将其作为内置功能。
退房:
评论