¿Cómo se agrega un onloadevento a un elemento?
Puedo usar:
<div onload="oQuickReply.swap();" ></div>¿para esto?
No puedes. La forma más fácil de hacerlo funcionar sería colocar 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>... por lo que no bloquea la carga del siguiente contenido.
</body>. fe si desea ocultar el <div>único si javascript está habilitado pero evite "flashear" El tiempo de visibilidad depende de cuánto tiempo necesita el navegador cargar / analizar todos los scripts en línea / externos.
onload
El onloadevento solo se puede usar en document(body)sí mismo, marcos, imágenes y scripts. En otras palabras, se puede conectar solo al cuerpo y / o a cada recurso externo . El div no es un recurso externo y se carga como parte del cuerpo, por lo que el onloadevento no se aplica allí.
onloadno funciona en ninguna <script>sin un srcatributo HTML (yo estaba tratando de utilizar este consejo en una secuencia de comandos en línea y encontró que no estaba trabajando)
Puede activar algunos js automáticamente en un elemento IMG usando onerror, y no src.
<img src onerror='alert()'>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 el evento de carga
¡Prueba esto! ¡Y nunca use el gatillo dos veces en div!
Puede definir la función para llamar antes de la etiqueta div.
$(function(){
$('div[onload]').trigger('onload');
});DEMO: jsfiddle
onload) y luego llama a esas funciones. El script funciona incluso si cambia el atributo a algo diferente a, onloadpor ejemplo, jsfiddle.net/mrszgbxh
Solo quiero agregar aquí que si alguien quiere llamar a una función en el evento de carga de div y no desea usar jQuery (debido a un conflicto 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>podemos usar MutationObserver para resolver el problema de manera eficiente agregando un código de muestra 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>En noviembre de 2019, estoy buscando una manera de crear un (hipotético) onparse EventListenerpara el <elements>cual no lo tomo onload.
El (hipotético) onparse EventListenerdebe poder escuchar cuando se analiza un elemento .
Estaba bastante contento con el segundo intento a continuación, pero me sorprendió que puedo hacer que el código sea más corto y simple, creando un evento a medida:
let parseEvent = new Event('parse');Esta es la mejor solución hasta ahora.
El siguiente ejemplo:
parse Eventwindow.onloado en cualquier momento) que:
data-onparseparse EventListenera cada uno de esos elementosparse Eventa cada uno de esos elementos para ejecutar elCallbackEjemplo de trabajo
// Create (homemade) parse event
let parseEvent = new Event('parse');
// Create Initialising Function which can be run at any time
const initialiseParseableElements = () => {
// Get all the elements which need to respond to an onparse event
let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');
// Attach Event Listeners and Dispatch Events
elementsWithParseEventListener.forEach((elementWithParseEventListener) => {
elementWithParseEventListener.addEventListener('parse', updateParseEventTarget, false);
elementWithParseEventListener.dataset.onparsed = elementWithParseEventListener.dataset.onparse;
elementWithParseEventListener.removeAttribute('data-onparse');
elementWithParseEventListener.dispatchEvent(parseEvent);
});
}
// Callback function for the Parse Event Listener
const updateParseEventTarget = (e) => {
switch (e.target.dataset.onparsed) {
case ('update-1') : e.target.textContent = 'My First Updated Heading'; break;
case ('update-2') : e.target.textContent = 'My Second Updated Heading'; break;
case ('update-3') : e.target.textContent = 'My Third Updated Heading'; break;
case ('run-oQuickReply.swap()') : e.target.innerHTML = 'This <code><div></code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
}
}
// Run Initialising Function
initialiseParseableElements();
let dynamicHeading = document.createElement('h3');
dynamicHeading.textContent = 'Heading Text';
dynamicHeading.dataset.onparse = 'update-3';
setTimeout(() => {
// Add new element to page after time delay
document.body.appendChild(dynamicHeading);
// Re-run Initialising Function
initialiseParseableElements();
}, 3000);div {
width: 300px;
height: 40px;
padding: 12px;
border: 1px solid rgb(191, 191, 191);
}
h3 {
position: absolute;
top: 0;
right: 0;
}<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>El primer intento a continuación (basado en @JohnWilliams'brillante truco de imagen vacía ) usó un código rígido<img /> y funcionó.
Pensé que debería ser posible eliminar por <img />completo el código rígido y solo insertarlo dinámicamente después de detectar, en un elemento que necesitaba disparar un onparseevento, un atributo como:
data-onparse="run-oQuickReply.swap()"Resulta que esto funciona muy bien.
El siguiente ejemplo:
data-onparse<img src />y agrega dinámicamente al documento, inmediatamente después de cada uno de esos elementosonerror EventListenercuando el motor de renderizado analiza cada<img src />Callback y elimina dinámicamente <img src />el documento generado.Ejemplo de trabajo
// Get all the elements which need to respond to an onparse event
let elementsWithParseEventListener = document.querySelectorAll('[data-onparse]');
// Dynamically create and position an empty <img> after each of those elements
elementsWithParseEventListener.forEach((elementWithParseEventListener) => {
let emptyImage = document.createElement('img');
emptyImage.src = '';
elementWithParseEventListener.parentNode.insertBefore(emptyImage, elementWithParseEventListener.nextElementSibling);
});
// Get all the empty images
let parseEventTriggers = document.querySelectorAll('img[src=""]');
// Callback function for the EventListener below
const updateParseEventTarget = (e) => {
let parseEventTarget = e.target.previousElementSibling;
switch (parseEventTarget.dataset.onparse) {
case ('update-1') : parseEventTarget.textContent = 'My First Updated Heading'; break;
case ('update-2') : parseEventTarget.textContent = 'My Second Updated Heading'; break;
case ('run-oQuickReply.swap()') : parseEventTarget.innerHTML = 'This <code><div></code> is now loaded and the function <code>oQuickReply.swap()</code> will run...'; break;
}
// Remove empty image
e.target.remove();
}
// Add onerror EventListener to all the empty images
parseEventTriggers.forEach((parseEventTrigger) => {
parseEventTrigger.addEventListener('error', updateParseEventTarget, false);
});div {
width: 300px;
height: 40px;
padding: 12px;
border: 1px solid rgb(191, 191, 191);
}<h2 data-onparse="update-1">My Heading</h2>
<h2 data-onparse="update-2">My Heading</h2>
<div data-onparse="run-oQuickReply.swap()">
This div hasn't yet loaded and nothing will happen.
</div>Puedo construir sobre @JohnWilliams' <img src>hackear (en esta página, desde 2017), que es, hasta ahora, el mejor enfoque que he encontrado.
El siguiente ejemplo:
onerror EventListenercuando el motor de renderizado analiza<img src />Callback y elimina el <img src />del documento.Ejemplo de trabajo
let myHeadingLoadEventTrigger = document.getElementById('my-heading-load-event-trigger');
const updateHeading = (e) => {
let myHeading = e.target.previousElementSibling;
if (true) { // <= CONDITION HERE
myHeading.textContent = 'My Updated Heading';
}
// Modern alternative to document.body.removeChild(e.target);
e.target.remove();
}
myHeadingLoadEventTrigger.addEventListener('error', updateHeading, false);<h2>My Heading</h2>
<img id="my-heading-load-event-trigger" src />use un iframe y escóndelo 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>Necesitaba ejecutar un código de inicialización después de insertar un fragmento 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 es válida para cualquier modificación parcial del DOM mediante la inserción de un elemento html, generalmente un<div> .
Hace algún tiempo, hice un truco con el evento de carga de un elemento casi invisible <img>contenido en un <div>, pero descubrí que un estilo vacío y con alcance también funcionaría:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>Actualización (15 de julio de 2017): la <style>carga no es compatible con la última versión de IE. Edge lo admite, pero algunos usuarios lo ven como un navegador diferente y se adhieren a IE. El <img>elemento 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 creo que necesito hacer sobre el uso de a <script>es cuánto más difícil es determinar qué <div>secuencia de comandos está cerca, especialmente al crear plantillas donde no se puede tener una identificación idéntica en cada instancia que genera la plantilla. Pensé que la respuesta podría ser document.currentScript, pero esto no es universalmente compatible. Un <script>elemento no puede determinar su propia ubicación DOM de manera confiable; una referencia a 'esto' apunta a la ventana principal y no sirve de nada.
Creo que es necesario conformarse con usar un <img>elemento, a pesar de ser tonto. Esto podría ser un agujero en el marco DOM / javascript que podría usar la conexión.
Dado que el onloadevento solo se admite en unos pocos elementos, debe utilizar un método alternativo.
Puede usar un MutationObserver para esto:
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>Realmente me gusta la biblioteca YUI3 para este tipo de cosas.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})onload.
Estoy aprendiendo javascript y jquery y estaba revisando 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 si esta es una buena forma de realizar una llamada de carga en el elemento div de la forma en que lo hice con jquery selector.
Gracias
Como todos decimos, no puedes usar el evento onLoad en un DIV sino antes que la etiqueta del cuerpo.
pero en caso de que tenga un archivo de pie de página e inclúyalo en muchas páginas. es mejor verificar primero si se muestra el div que desea en esa página, para que el código no se ejecute en las páginas que no contienen ese DIV para que se cargue más rápido y ahorre algo de tiempo para su aplicación.
entonces deberá darle una identificación a ese DIV y hacer:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}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 una solución.
<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>Puse el Div dentro de un Span y le di 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 son exactamente iguales, para 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á sobre el botón, haciendo que los eventos de mouseover y mouseout ayuden a empujar el script de desplazamiento hacia abajo. Luego, cualquier movimiento del mouse en ese punto empujará el script por última vez.
Puede usar un intervalo para verificarlo hasta que se cargue de esta manera: 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);Primero para responder a su pregunta: No, no puede, no directamente como quería hacerlo. Puede ser un poco tarde para responder, pero esta es mi solución, sin jQuery, javascript puro. Originalmente se escribió para aplicar una función de cambio de tamaño a áreas de texto después de que se carga DOM y en el keyup.
De la misma manera que podría usarlo para hacer algo con (todos) divs o solo uno, si se especifica, así:
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);
});Si realmente necesita hacer algo con un div, cargado después de cargar el DOM, por ejemplo, después de una llamada ajax, puede usar un truco muy útil, que es fácil de entender y lo encontrará ... trabajando con ... elements-before-the-dom-is-ready ... . Dice "antes de que el DOM esté listo", pero funciona de la misma manera, después de una inserción ajax o js-appendChild-lo que sea de un div. Aquí está el código, con algunos pequeños cambios a mis necesidades.
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);Cuando carga algo de HTML desde el servidor e lo inserta en el árbol DOM, puede usarlo, DOMSubtreeModifiedsin embargo, está en desuso, por lo que puede usar MutationObservero simplemente detectar contenido nuevo dentro de la función loadElement directamente, por lo que no tendrá que esperar los eventos DOM
Puede adjuntar un detector de eventos como se muestra a continuación. Se disparará cada vez que el div que tiene un selector se #my-idcargue completamente en DOM.
$(document).on('EventName', '#my-id', function() {
// do something
});En este caso, EventName puede ser 'cargar' o 'hacer clic'
Utilice el evento body.onload en su lugar, ya sea mediante el atributo ( <body onload="myFn()"> ...) o vinculando un evento en Javascript. Esto es extremadamente común con jQuery :
$(document).ready(function() {
doSomething($('#myDiv'));
});Prueba esto.
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>Prueba 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>alert("This is a div.");se llama cuando se ejecuta esta línea y undefinedse asigna el resultado (que es ) div.onload. Lo cual es completamente inútil.
No puede agregar la carga de eventos en div, pero puede agregar onkeydown y activar el evento onkeydown en la carga de documentos
$(function ()
{
$(".ccsdvCotentPS").trigger("onkeydown");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div onkeydown="setCss( );"> </div>`
bodymejordivdivlos elementos no se "cargan".