¿Cómo agregar un evento onload a un elemento div?
¿Cómo se agrega un evento onload a un elemento? Puedo usar:
<div onload="oQuickReply.swap();" ></div>
Para esto?
17 answers
No, no se puede. La forma más fácil de hacer que funcione sería poner la llamada a la función directamente después del elemento
Ejemplo:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...
O - mejor aún-justo delante de </body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>
So por lo que no bloquea la carga del siguiente contenido.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-08-16 11:45:39
El evento onload solo se puede usar en el propio document(body), marcos, imágenes y scripts. En otras palabras, solo se puede adjuntar a body y / o a cada recurso externo. El div no es un recurso externo y se carga como parte del cuerpo, por lo que el evento onload no se aplica allí.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2014-03-01 15:21:53
Puede activar algunos js automáticamente en un elemento IMG usando onerror, y no src.
<img src onerror='alert()'>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-01-16 21:10:59
El evento Onload solo es compatible con algunas etiquetas como las que se enumeran a continuación.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
Aquí la referencia para onload event
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-16 02:51:20
Solo quiero agregar aquí que si alguien desea llamar a una función en el evento de carga de div y no desea usar jQuery (debido a conflictos como en mi caso), simplemente llame a una función después de todo el código html o cualquier otro código que haya escrito, incluido el código de función y simplemente llame a una función .
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function_name();
</script>
O
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2012-10-17 10:03:56
¡Prueba esto! Y nunca use trigger dos veces en div!
Puede definir la función a llamar antes de la etiqueta div.
$(function(){
$('div[onload]').trigger('onload');
});
DEMO: jsfiddle
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-03-09 05:04:30
Usar un iframe y ocultarlo iframe funciona como una etiqueta de cuerpo
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-12-07 21:05:00
Necesitaba tener algún código de inicialización ejecutado después de insertar un trozo de html (instancia de plantilla), y por supuesto no tenía acceso al código que manipula la plantilla y modifica el DOM. La misma idea se aplica a cualquier modificación parcial del DOM mediante la inserción de un elemento html, normalmente un <div>.
Hace algún tiempo, hice un hack con el evento onload de un <img> casi invisible contenido en un <div>, pero descubrí que un estilo vacío y de alcance también do:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>
Actualización (Jul 15 2017) -
El <style> onload no está soportado en la última versión de IE. Edge lo admite, pero algunos usuarios lo ven como un navegador diferente y se adhieren a IE. El elemento <img> parece funcionar mejor en todos los navegadores.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>
Para minimizar el impacto visual y el uso de recursos de la imagen, use un src en línea que la mantenga pequeña y transparente.
Un comentario que siento que necesito hacer sobre el uso de un <script> es cuánto más difícil es determinar que <div> el script está cerca, especialmente en plantillas donde no puede tener un id idéntico en cada instancia que genera la plantilla. Pensé que la respuesta podría ser un documento.currentScript, pero esto no es universalmente soportado. Un elemento <script> no puede determinar su propia ubicación DOM de forma fiable; una referencia a 'this' apunta a la ventana principal, y no es de ayuda.
Creo que es necesario conformarse con usar un elemento <img>, a pesar de ser tonto. Esto podría ser un agujero en el DOM / javascript framework que podría usar plugging.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-15 18:37:00
Podemos usar MutationObserver para resolver el problema de manera eficiente agregando un código de ejemplo a continuación
<!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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2013-09-21 08:33:39
Me gusta mucho la biblioteca YUI3 para este tipo de cosas.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-10-30 04:36:03
Usa el cuerpo.onload event en su lugar, ya sea a través del atributo (<body onload="myFn()"> ...) o vinculando un evento en Javascript. Esto es extremadamente común con jQuery :
$(document).ready(function() {
doSomething($('#myDiv'));
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2010-10-30 04:42:23
Estoy aprendiendo javascript y jquery y estaba pasando por toda la respuesta,
me enfrenté al mismo problema al llamar a la función javascript para cargar el elemento div.
Lo intenté $('<divid>').ready(function(){alert('test'}) y funcionó para mí. Quiero saber es esta buena manera de realizar la llamada onload en el elemento div de la manera que lo hice usando jquery selector.
Gracias
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-02-26 06:05:47
Como se ha dicho, no se puede usar el evento onLoad en un DIV sino antes de la etiqueta body.
Pero en caso de que tenga un archivo de pie de página e incluirlo en muchas páginas. es mejor verificar primero si el div que desea se muestra en esa página, por lo que el código no se ejecuta en las páginas que no contienen ese DIV para que se cargue más rápido y ahorre tiempo para su aplicación.
Así que tendrás que darle a ese DIV una ID y hacer:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-10-19 07:03:32
Tenía la misma pregunta y estaba tratando de obtener un Div para cargar un script de desplazamiento, usando onload o load. El problema que encontré fue que siempre funcionaría antes de que el Div pudiera abrirse, no durante o después, por lo que realmente no funcionaría.
Entonces se me ocurrió esto como un trabajo alrededor.
<body>
<span onmouseover="window.scrollTo(0, document.body.scrollHeight);"
onmouseout="window.scrollTo(0, document.body.scrollHeight);">
<div id="">
</div>
<a href="" onclick="window.scrollTo(0, document.body.scrollHeight);">Link to open Div</a>
</span>
</body>
Coloqué el Div dentro de un Lapso y le di al Lapso dos eventos, un mouseover y un mouseout. Luego, debajo de ese Div, coloqué un enlace para abrir el Div, y le di a ese enlace un evento para onclick. Todos los eventos exactamente lo mismo, para hacer que la página se desplace hacia abajo hasta la parte inferior de la página. Ahora, cuando se hace clic en el botón para abrir el Div, la página saltará hacia abajo en parte, y el Div se abrirá por encima del botón, haciendo que los eventos mouseover y mouseout ayuden a empujar el script de desplazamiento hacia abajo. Entonces cualquier movimiento del ratón en ese punto empujará el script una última vez.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-12-04 06:05:56
Prueba esto.
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>Pruebe este también. Debe eliminar . de oQuickReply.swap() para que la función funcione.
document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}<div id="div"></div>Puedes usar un intervalo para comprobarlo hasta que se cargue así: 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);
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-09 16:11:52
No puede agregar evento onload en div, pero puede agregar onkeydown y activar el evento onkeydown en document load
$(function ()
{
$(".ccsdvCotentPS").trigger("onkeydown");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div onkeydown="setCss( );"> </div>`Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-25 07:33:44