如何新增 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 元素？