如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
如何向元素添加onload事件?
我可以使用:
<div onload="oQuickReply.swap();" ></div>
对于这个吗?
当前回答
我们可以使用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>
其他回答
Onload事件,它只支持下面列出的几个标签。
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
这里是onload事件的引用
我非常喜欢用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
您可以如下所示附加一个事件侦听器。当选择器#my-id的div完全加载到DOM时,它就会触发。
$(document).on('EventName', '#my-id', function() {
// do something
});
在本例中,EventName可以是'load'或'click'
https://api.jquery.com/on/#on-events-selector-data-handler
由于onload事件仅在少数元素上受支持,因此必须使用另一种方法。
你可以使用MutationObserver:
const trackElement = element => { let present = false; const checkIfPresent = () => { if (document.body.contains(element)) { if (!present) { console.log('in DOM:', element); } present = true; } else if (present) { present = false; console.log('Not in DOM'); } }; const observer = new MutationObserver(checkIfPresent); observer.observe(document.body, { childList: true }); checkIfPresent(); return observer; }; const element = document.querySelector('#element'); const add = () => document.body.appendChild(element); const remove = () => element.remove(); trackElement(element); <button onclick="add()">Add</button> <button onclick="remove()">Remove</button> <div id="element">Element</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框架中的一个漏洞,需要加以弥补。