如何将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事件不适用。

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

 <img src onerror='alert()'> 

我只是想在这里添加,如果任何人想要调用div的加载事件的function,你不想使用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> 

onload事件只支持下面列出的一些标签。

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

这里是onload事件的参考

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

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

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

演示: jsfiddle

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

我需要在插入一段html(模板实例)之后运行一些初始化代码,当然,我没有访问操纵模板和修改DOM的代码。 通过插入一个html元素(通常是一个<div> ,对DOM的任何部分修改都是一样的。

前段时间,我做了一个包含在<div>中的几乎不可见的<img>的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> 

为了最大限度地减less图像的视觉冲击和资源使用,请使用内联src,使其保持小而透明。

我觉得我需要做一个关于使用<script> ,要确定脚本是靠近哪个<div>尤其是在模板中,在模板生成的每个实例中不能有相同的id 。 我认为答案可能是document.currentScript,但是这不是普遍支持。 一个<script>元素不能可靠地确定自己的DOM位置; 对“this”的引用指向主窗口,并没有任何帮助。

我认为尽pipe是愚蠢的,但仍然有必要使用<img>元素。 这可能是可以使用插件的DOM / JavaScript框架中的一个漏洞。

我真的很喜欢这个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

使用body.onload事件,或者通过属性( <body onload="myFn()"> ... )或通过绑定Javascript中的事件。 这在jQuery中非常常见:

 $(document).ready(function() { doSomething($('#myDiv')); }); 

我正在学习JavaScript和jQuery,并通过所有的答案,我面临同样的问题,当调用JavaScript函数加载div元素。 我尝试了$('<divid>').ready(function(){alert('test'})它对我$('<divid>').ready(function(){alert('test'})我想知道这是一个好方法,使用jqueryselect器。

谢谢

正如所有说的,你不能在DIV上使用onLoad事件,而是在body标签之前使用onLoad事件。

但如果你有一个页脚文件,并将其包含在很多页面中。 最好先检查你所需要的div是否显示在那个页面上,这样代码就不会在没有包含该DIV的页面中执行,这样可以加快载入速度,节省一些时间。

所以你需要给该DIV一个ID,然后:

 var myElem = document.getElementById('myElementId'); if (myElem !== null){ put your code here} 

您不能在div上添加事件onload,但可以在文件加载时添加onkeydown并触发onkeydown事件

 $(function () { $(".ccsdvCotentPS").trigger("onkeydown"); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div onkeydown="setCss( );"> </div>`