我应该使用window.onload还是脚本块?
我有一个javascript函数,可在调用DOM时操作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,因为告诉页面加载时运行什么代码比读取scads可能执行的脚本标记要容易得多。
回答
虽然我与其他人同意在可能的情况下使用window.onload以获得清晰的代码,但我非常确定当用户在IE中单击"后退"按钮时将再次调用window.onload,但在Firefox中不会再次调用它。 (除非他们最近更改了它)。
编辑:我可能会倒退。
在某些情况下,当用户在另一个页面上单击返回按钮返回到页面时,要评估脚本时,有必要使用内联脚本。
欢迎对此答案进行任何更正或者补充...我不是javascript专家。
回答
@极客
I'm pretty sure that window.onload will be called again when a user hits the back button in IE, but doesn't get called again in Firefox. (Unless they changed it recently).
在Firefox中,无论我们如何导航到页面,都在DOM完成加载后调用" onload"。
回答
一些JavaScript框架(例如mootools)可让我们访问名为" domready"的特殊事件:
Contains the window Event 'domready', which will execute when the DOM has loaded. To ensure that DOM elements exist when the code attempting to access them is executed, they should be placed within the 'domready' event. 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。
- DOM完成后,将立即执行$(document).ready()操作-window.onload必须等待图像等。
我希望我不会成为在每个JavaScript问题上都建议使用jQuery的家伙,但这确实很棒。
回答
IE上的window.onload也等待二进制信息加载。它不是"何时加载DOM"的严格定义。因此,在认为页面已加载与脚本被触发之间可能会有很大的滞后。因此,我建议我们研究一种丰富的JS框架(原型/ jQuery)来为我们处理繁重的工作。
回答
我已经写了很多Javascript和window.onload是一种糟糕的方法。它很脆弱,要等到页面的每个资产都已加载。因此,如果一幅图像要花很长时间,或者某个资源要等到30秒后才会超时,则代码将无法运行,用户才能看到/操作该页面。
另外,如果另一段Javascript决定使用window.onload = function(){},则代码将被删除。
页面准备就绪时,运行代码的正确方法是等待需要更改的元素准备就绪/可用。许多JS库都将此作为内置功能。
退房:
- http://docs.jquery.com/Events/ready#fn
- http://developer.yahoo.com/yui/event/#onavailable
回答
这是一篇关于该主题的很好的文章:
http://mattberseth.com/blog/2008/08/when_is_it_safe_to_modify_the.html