如何向元素添加onload事件?

我可以使用:

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

对于这个吗?


当前回答

试试这个!永远不要在div上使用触发器两次!

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

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

演示:杰斯菲德尔

其他回答

我需要在插入一段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框架中的一个漏洞,需要加以弥补。

你可以使用一个interval来检查它,直到它像这样加载: https://codepen.io/pager/pen/MBgGGM

let checkonloadDoSomething = setInterval(() => {
  let onloadDoSomething = document.getElementById("onloadDoSomething");
  if (onloadDoSomething) {
    onloadDoSomething.innerHTML="Loaded"
    clearInterval(checkonloadDoSomething);
  } else {`enter code here`
    console.log("Waiting for onloadDoSomething to load");
  }
}, 100);

试试这个!永远不要在div上使用触发器两次!

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

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

演示:杰斯菲德尔

这是一个非常简单的解决方案,100%有效。 在div中加载所有数据后,如果你想要执行javascript,只需在div或div的最后一行中加载<img>标记。 因为<img>标签支持onload事件,所以你可以很容易地调用javascript在这里如下:

<div>
<img onLoad="alert('Problem Solved');" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
</div>

上图只显示了一个点(.),你甚至无法正常看到。 试一试。

由于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>