在<body>部分通过Javascript添加body.onload事件处理程序

38

我们希望在文档中包含来自Google Maps API的地图。文档指导我们使用一个函数来初始化地图,该函数由标签的onload()事件调用。

常规的调用方式:

<body onload="initialize_map();">

这对我们来说行不通,因为我们正在使用Template::Toolkit,而<body>标签已经包含在我们的包装器中。简而言之:当我们的Javascript代码开始运行时<body>标签已经被打印出来了。

我尝试过类似于这样的东西,但它只适用于onclick,而不是onload。我想那是因为Javascript代码本身就在<body>标签下面。

var body = document.getElementsByTagName("body")[0];

body.addEventListener("load", init(), false);

function init() {
        alert("it works!");
};

希望得到如何启动Google地图的任何帮助!

5个回答

47
body.addEventListener("load", init(), false);

init()函数的作用是立即运行该函数并将其返回值赋给load事件。

你需要的是将函数的引用分配给load事件,而不是返回值。因此,你需要删除()。

body.addEventListener("load", init, false);

你应该使用 window.onload 而不是 body.onload

addEventListener 在大多数浏览器中都受支持,除了IE 8


2
对于IE浏览器,它将使用attachEvent。quirksmode.org网站对此有很好的描述:http://quirksmode.org/js/events_advanced.html - Felix Kling
1
现在它确实很友好。 - WebWanderer

46

你应该真正使用以下内容代替(适用于所有较新的浏览器):

window.addEventListener('DOMContentLoaded', init, false);

2
为什么这个不起作用?document.addEventListener('load', init, false); - Luke
4
@Luke,你应该将该事件绑定到窗口上,写成这样:window.addEventListener('load', init, false); - Jacob Lauritzen

19

正如@epascarello提到的那样,对于符合W3C标准的浏览器,您应该使用:

body.addEventListener("load", init, false);

但是,如果你希望它也能在IE<9上运行,你可以使用:

var prefix = window.addEventListener ? "" : "on";
var eventName = window.addEventListener ? "addEventListener" : "attachEvent";
document.body[eventName](prefix + "load", init, false);

或者如果您希望将其放在一行中:

document.body[window.addEventListener ? 'addEventListener' : 'attachEvent'](
    window.addEventListener ? "load" : "onload", init, false);

注意:这里通过文档直接获取了对body元素的引用,省去了第一行的需要。

此外,如果你正在使用jQuery,并且想要使用“DOM就绪”事件而不是当body载入时,答案甚至可以更短...

$(init);

9

由于我们已经在使用jQuery来实现图形界面美化特性,因此我们最终选择了它。像这样的代码:

$(document).ready(function() {
    // any code goes here
    init();
});

它做了我们想要的一切,并且在意浏览器不兼容性问题。


1
还有一种稍微简单的 $(function() { init(); }); 形式可用。 - Thomas Luzat
11
更简单的写法是 $(init); - Rusi Papazov

3

只需将要执行的代码包装到窗口对象的onload事件中:

window.onload = function(){ 
   // your code here
}

13
这种方法存在两个潜在问题:1)会覆盖可能已经附加的任何其他onload事件,2)根据您放置该代码的位置,onload可能已经被触发,结果可能永远不会被触发。 - Matt

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接