如何将onload事件添加到div元素

如何向元素添加onload事件?

我可以使用:

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

对于这个吗?

当前回答

我需要在插入一段html(模板实例)之后运行一些初始化代码，当然我无法访问操作模板和修改DOM的代码。通过插入html元素(通常是<div>)来对DOM进行任何部分修改，也适用同样的想法。

前一段时间，我做了一个黑客与一个几乎不可见的<img>包含在<div>的onload事件，但发现一个作用域，空风格也会做:

<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" >   </style>
.....
</div>

更新(2017年7月15日)- IE上一个版本不支持<style> onload。Edge确实支持它，但一些用户认为这是一个不同的浏览器，并坚持使用IE。<img>元素似乎在所有浏览器上都能更好地工作。

<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>

为了最小化图像的视觉影响和资源使用，可以使用内联src来保持图像的小而透明。

关于使用<script>，我觉得我需要做的一个评论是，确定脚本靠近哪个<div>是多么困难，特别是在模板中，你不能在模板生成的每个实例中都有相同的id。我想答案可能是文件。但这不是普遍支持的。<script>元素不能可靠地确定自己的DOM位置;引用“this”指向主窗口，没有任何帮助。

我认为有必要满足于使用<img>元素，尽管它很愚蠢。这可能是DOM/javascript框架中的一个漏洞，需要加以弥补。

2017-03-16 21:38:04

其他回答

我们可以使用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>

2013-09-09 16:53:40

当你从服务器加载一些html并将其插入DOM树时，你可以使用DOMSubtreeModified，但它已弃用-所以你可以使用MutationObserver或只是直接在loadElement函数中检测新内容，这样你就不需要等待DOM事件

2019-04-08 19:34:47

我非常喜欢用YUI3库来做这类事情。

<div id="mydiv"> ... </div>

<script>
YUI().use('node-base', function(Y) {
  Y.on("available", someFunction, '#mydiv')
})

见:http://developer.yahoo.com/yui/3/event/ onavailable

2010-10-30 04:36:03

首先回答你的问题:不，你不能，不能直接这样做，就像你想做的那样。也许现在回答有点晚，但这是我的解决方案，没有jQuery，纯javascript。它最初是用来在DOM加载后和在keyup上应用一个调整文本区域大小的函数。

同样地，你可以用它来做一些(所有)div或只有一个，如果指定的话，像这样:

document.addEventListener("DOMContentLoaded", function() {
    var divs = document.querySelectorAll('div'); // all divs
    var mydiv = document.getElementById('myDiv'); // only div#myDiv
    divs.forEach( div => {
        do_something_with_all_divs(div);
    });
    do_something_with_mydiv(mydiv);
});

如果你真的需要在DOM加载后加载div，例如在ajax调用之后，你可以使用一个非常有用的hack，这很容易理解，你会发现它…working with-elements-before-the- DOM -is-ready....它说“在DOM准备好之前”，但它以同样的方式出色地工作，在ajax插入或js- appendchild -任何div之后。下面是代码，根据我的需要做了一些小更改。

css

.loaded { // I use only class loaded instead of a nodename
    animation-name: nodeReady;
    animation-duration: 0.001s;
}

@keyframes nodeReady {  
    from { clip: rect(1px, auto, auto, auto); }
    to { clip: rect(0px, auto, auto, auto); }  
}

javascript

document.addEventListener("animationstart", function(event) {
    var e = event || window.event;
    if (e.animationName == "nodeReady") {
        e.target.classList.remove('loaded');
        do_something_else();
    }
}, false);

2019-02-07 19:16:22

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

例子:

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

或者-甚至更好-就在</body>前面:

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

.．.因此它不会阻止以下内容的加载。

2010-10-30 14:30:39

如何将onload事件添加到div元素

推荐文章

最新文章

标签