logo标签列表

将JavaScript事件钩子绑定到页面加载

javascriptmaster-pagesasp.netonload-event
27

我有一个aspx页面，在body的onload事件中运行以下JavaScript函数。

<body onload="startClock();">

然而，我正在设置aspx使用主页，因此aspx中不存在body标签。我该如何在页面被访问时注册startClock函数并仍然使用主页？

5个回答
43

如果您不想明确指定window.onload或使用框架，请考虑：

<script type="text/javascript">
function startClock(){
    //do onload work
}
if(window.addEventListener) {
    window.addEventListener('load',startClock,false); //W3C
} else {
    window.attachEvent('onload',startClock); //IE
}
</script>

http://www.quirksmode.org/js/events_advanced.html

当然，我会稍微抽象一下细节 - 希望这对提问者是显而易见的... - Jason Bunting
你可以把所有内容都放在一个脚本标签里。我更新了我的答案以反映这一点。这将强制执行“if”逻辑，因为脚本被解析时startClock事件已准备好在onload时运行。 - Corbin March
简单而流畅的方式来完成它。谢谢。 - Jagd
1
由于非微软浏览器在实现W3C DOM Level 2建议方面表现得相当不错，因此“else”仅适用于IE。正如Jason所提到的，我们可以（应该）抽象出细节，同时我们还可以添加谨慎性（这是一个不支持任何事件注册模型的浏览器吗？这个函数已经注册了吗等）。在我的示例中，我选择了简单性。值得被踩吗？我不知道。 - Corbin March
在Chrome中，document.addEventListener无效，但window.addEventListener有效。 - fabb
显示剩余3条评论
2

将此代码插入页面的任意位置：

<script type="text/javascript">
window.onload = function(){
    //do something here
}
</script>
7
唯一的问题是，如果其他代码也被拉到组合页面中并执行了相同的操作，那么就会产生“后来者居上”的情况。重新定义window.onload可以解决这个问题，但需要注意确保它之前没有被定义过！ - Jason Bunting
我看过一些代码，测试是否定义了 window.onload，如果是，则将其引用到一个临时变量中，然后从 新的 window.onload 中 "调用" 该变量。 - Alan H.
1
最干净的方法是使用像jQuery这样的JavaScript框架。 在jQuery中，您可以按以下方式定义on-load函数：
$(function() {
    // ...
});

或者，如果你不喜欢短的$();风格：

$(document).ready(function() {
    // ...
});
同意。实际上，在发布这个问题几个月后（现在已经将近一年了），我已经开始使用jQuery了，我很喜欢它。 - Jagd
较新版本的jQuery需要使用$(document).ready(...)样式。 - Doug Domeny
1
不，在较新的版本中，$() 的行为已经改变了，但是 $(some_function) 没有改变。 - ThiefMaster
1
window.addEventListener("load", function() {
    startClock();
});

这将在页面加载时调用startClock函数。
不错，只是别忘了在 "}" 后面加上 ");"。 - JulienVan
感谢@JulienVan指出问题。已进行编辑。 - Kartikeya_M
0
Page.ClientScriptManager.RegisterStartupScrip(this.GetType(), "startup", "startClock();", true);

或者使用原型

document.observe("dom:loaded", function() {
  // code here
});
我猜你是指RegisterClientScriptBlock吧？ - Philipp Michalski
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接