javascript - HTML 加载不工作

Question

我正在尝试使用 html onload 事件来触发 javascript，但无法正常工作。原代码为:

html:

<div id='map' onload="generateMap.createMap();"></div>

JS:

var generateMap = function(){
return{
    createMap: function(){
        console.log(this.attr('id'));
        element = this.attr('id');
        navigator.geolocation.getCurrentPosition(initialize);
    }
};

为了测试，我将 html 更改为:

<div id='map' onload="alert('test');"></div>

谁能告诉我为什么没有任何效果？

Answer 1

首先，onload 属性对 div 标签无效。您很可能打算将 onload 放在 body 标记中。

不幸的是，这不是唯一的问题。

在您的 onLoad 中，您引用 generateMap 就好像它是一个具有方法 createMap 的对象。然而，这种情况并非如此。您已将 generateMap 分配给匿名函数。

要使您的代码正常工作，generateMap 需要是一个具有方法 createMap 的对象。

你只需要首先将它设置为一个对象:

var generateMap = {
    createMap: function(){
        console.log(this.attr('id'));
        element = this.attr('id');
        navigator.geolocation.getCurrentPosition(initialize);
    }
};

或者如果您出于任何原因需要保留匿名函数，您可以使用立即执行的函数:

var generateMap = (function(){
    return {
        createMap: function(){
            console.log(this.attr('id'));
            element = this.attr('id');
            navigator.geolocation.getCurrentPosition(initialize);
    }
})();