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);
    }
})();

Answer 2

如果你正在使用jQuery，那么我喜欢以下功能，它为所有标签添加了onload功能：

$(document).ready (function () {
    jQuery.each ($("[onload]"), function (index, item) {
        $(item).prop ("onload").call (item);
        return false;
    });
});

Answer 3

div有没有 onload 事件。您可以在div标记之后使用脚本标记来模拟onload行为。

使用此

<head>
    <meta charset="utf-8">
    <script type="text/javascript">
        var generateMap = {
            createMap: function(element) {
                navigator.geolocation.getCurrentPosition(initialize);
            }
        };
    </script>
</head>

<body>
    <div id='map'></div>
    <script type="text/javascript">
        generateMap.createMap('map');
    </script>
</body>

Answer 4

假设Chrome .. div标记没有onload个事件。检查以下两个jsfiddles：

不起作用： http://jsfiddle.net/o81e4dkr/

使用： http://jsfiddle.net/p3osqrdn/

我不知道在加载div时触发事件的方法，除非它是通过jQuery.load（）加载的，在这种情况下你可以使用回调。

HTML onload无法正常工作

4 个答案: