如何添加 onload 事件到一个 div 元素？

问题描述

如何将一个 onload 事件添加到元素？我可以用吗：

<div onload="oQuickReply.swap();" ></div>

为了这？

最佳解决方案

不，你不行使其工作的最简单的方法是将函数调用直接放在元素之后

例：

...
<div id="somid">Some content</div>
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
...

或者更好 – 刚刚在</body> 前面：

...
<script type="text/javascript">
   oQuickReply.swap('somid');
</script>
</body>

… 所以它不阻止以下内容加载。

次佳解决方案

onload 事件只能在 document(body)本身，框架，图像和脚本上使用。换句话说，它可以仅附加到身体和/或每个外部资源。该 div 不是一个外部资源，它作为身体的一部分加载，所以 onload 事件不适用于那里。

第三种解决方案

我只想在这里添加，如果有人想要调用 div& 你不想使用 jQuery(因为我的情况下的冲突)，所以在所有 html 代码或任何其他编写的代码之后，只需调用一个函数，包括函数代码，并且只需调用一个函数。

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
   function_name();
</script>

要么

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
 function my_func(){
   function definition;      

  }

 my_func();
</script>

第四种方案

您可以使用 onerror，而不是 src 在 IMG 元素上自动触发一些 js 。

<img src onerror='alert()'>

第五种方案

尝试这个！并且不要在 div 上使用触发器两次！

您可以定义在 div 标签之前调用的函数。

$(function(){
    $('div[onload]').trigger('onload');
});

演示：jsfiddle

第六种方案

onload 事件只支持下面列出的几个标签。

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

这里是 onload event 的参考

第七种方案

我们可以使用 MutationObserver 以有效的方式在下面添加示例代码来解决问题

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #second{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: #a1a1a1;
        }
    </style>
</head>
<body>
<div id="first"></div>
<script>
    var callthis = function(element){
           element.setAttribute("tabIndex",0);
        element.focus();
        element.onkeydown = handler;
        function handler(){
                alert("called")
        }
    }


    var observer = new WebKitMutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            for (var i = 0; i < mutation.addedNodes.length; i++)
            if(mutation.addedNodes[i].id === "second"){
                callthis(mutation.addedNodes[i]);
            }

        })
    });
    observer.observe(document.getElementById("first"), { childList: true });


    var ele = document.createElement('div');
    ele.id = "second"

    document.getElementById("first").appendChild(ele);

</script>

</body>
</html>

第八种方案

使用 iframe 并隐藏 iframe 的工作方式就像一个 body 标签

<!DOCTYPE html>
<html>
<body>

<iframe style="display:none" onload="myFunction()" src="http://www.w3schools.com"></iframe>
<p id="demo"></p>

<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "Iframe is loaded.";
}
</script>

</body>
</html>

参考文献

How to add onload event to a div element?

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

如何添加 onload 事件到一个 div 元素？