HTML加载不起作用

HTML onload not working

本文关键字：不起作用 加载 HTML      更新时间：2023-09-26

我正试图使用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>

有人能告诉我为什么什么都不起作用吗？

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

div没有onload事件。您可以在div标记之后使用script标记来模拟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>

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

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

作品：http://jsfiddle.net/p3osqrdn/

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

如果您使用的是jQuery，那么我喜欢以下为所有标签添加加载功能的函数：

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