Comment ajouter un événement onload à un élément div?
Comment ajouter un événement onload à un élément? Puis-je utiliser:
<div onload="oQuickReply.swap();" ></div>
pour ça?
Non, tu ne peux pas. Le moyen le plus simple de le faire fonctionner serait de placer l’appel de fonction directement après l’élément.
Exemple:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...
ou - encore mieux - juste devant </body>:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>
... afin de ne pas bloquer le chargement du contenu suivant.
L'événement onload ne peut être utilisé que sur la document(body) elle-même, les cadres, les images et les scripts. En d'autres termes, il ne peut être attaché qu'à un corps et/ou chaque ressource externe . La div n'est pas une ressource externe et est chargée en tant que partie du corps, donc l'événement onload ne s'applique pas à cet endroit.
Vous pouvez déclencher automatiquement quelques js sur un élément IMG en utilisant onerror, et pas de src.
<img src onerror='alert()'>
onload, il ne prend en charge que quelques balises, comme indiqué ci-dessous.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
Voici la référence pour onload event
Essaye ça! Et n'utilisez jamais la gâchette deux fois sur div!
Vous pouvez définir une fonction à appeler avant la balise div.
$(function(){
$('div[onload]').trigger('onload');
});
DEMO: jsfiddle
Je veux juste ajouter ici que si quelqu'un veut appeler une fonction lors d'un événement de charge de div & vous ne voulez pas utiliser jQuery (à cause d'un conflit comme dans mon cas), appelez simplement une fonction après tout le code html ou toute autre tout autre code que vous avez écrit, y compris le code de fonction et , appelez simplement une fonction.
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function_name();
</script>
OR
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>
utiliser un iframe et le cacher iframe fonctionne comme une balise 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>
J'avais besoin de faire exécuter du code d'initialisation après l'insertion d'un bloc de code HTML (instance de modèle) et, bien entendu, je n'avais pas accès au code qui manipule le modèle et modifie le DOM. La même idée vaut pour toute modification partielle du DOM par l'insertion d'un élément HTML, généralement un <div>.
Il y a quelque temps, j'ai fait un piratage avec l'événement onload d'un <img> presque invisible contenu dans un <div>, mais j'ai découvert qu'un style scoped et vide conviendrait également:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>
Mise à jour (15 juillet 2017) - Le <style> onload n'est pas pris en charge dans la dernière version de IE. Edge le prend en charge, mais certains utilisateurs y voient un navigateur différent et s'en tiennent à IE. L'élément <img> semble mieux fonctionner sur tous les navigateurs.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>
Pour minimiser l'impact visuel et l'utilisation des ressources de l'image, utilisez un code source intégré qui la garde petite et transparente.
Un commentaire que j'estime devoir faire sur l'utilisation d'un <script> est qu'il est beaucoup plus difficile de déterminer le <div> dont le script est proche, en particulier pour les modèles où vous ne pouvez pas avoir un identifiant identique à chaque fois que le modèle génère. Je pensais que la réponse pourrait être document.currentScript, mais cela n'est pas universellement supporté. Un élément <script> ne peut pas déterminer son propre emplacement DOM de manière fiable; une référence à 'ceci' pointe vers la fenêtre principale et ne sert à rien.
Je crois qu'il est nécessaire de se contenter d'utiliser un élément <img>, malgré le fait d'être maladroit. Cela pourrait être un trou dans le framework DOM/javascript qui pourrait utiliser la connexion.
nous pouvons utiliser MutationObserver pour résoudre le problème de manière efficace en ajoutant un exemple de code ci-dessous
<!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>
J'aime beaucoup la bibliothèque YUI3 pour ce genre de chose.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})
Comme tout le monde l'a dit, vous ne pouvez pas utiliser l'événement onLoad sur une DIV, mais avant la balise body.
mais si vous avez un fichier de pied de page et l'inclure dans plusieurs pages. il est préférable de vérifier d'abord si la div que vous voulez se trouve sur la page affichée. Ainsi, le code ne sera pas exécuté dans les pages ne contenant pas cette DIV pour accélérer son chargement et gagner du temps pour votre application.
vous devrez donc donner un identifiant à cette DIV et faire:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
J'apprenais javascript et jquery et je parcourais toute la réponse, J'ai rencontré le même problème lorsque j'ai appelé la fonction javascript pour charger l'élément div . J'ai essayé $('<divid>').ready(function(){alert('test'}) et cela a fonctionné pour moi. Je veux savoir si c’est un bon moyen d’exécuter un appel onload sur un élément div de la manière dont j’ai utilisé le sélecteur JQuery.
merci
J'avais la même question et j'essayais de charger un div de charger un script de défilement, en utilisant onload ou load. Le problème que j’ai constaté est que cela fonctionnerait toujours avant que la Div ne puisse s’ouvrir, pas pendant ou après, afin que cela ne fonctionne pas vraiment.
Ensuite, j'ai trouvé ça comme un moyen de contourner le problème.
<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>
J'ai placé la div à l'intérieur d'une travée et lui ai donné deux événements, un survol et une sortie. Ensuite, sous cette div, j'ai placé un lien pour ouvrir la div et lui ai donné un événement pour onclick. Tous les événements sont identiques, pour que la page défile vers le bas. Désormais, lorsque l'utilisateur clique sur le bouton pour ouvrir la Div, la page saute partiellement et la Div s'ouvre au-dessus du bouton, ce qui permet aux événements mouseover et mouseout de vous aider à pousser le script de défilement. Ensuite, tout mouvement de la souris à ce point poussera le script une dernière fois.
Lorsque vous chargez du code HTML à partir du serveur et que vous l'insérez dans l'arborescence DOM, vous pouvez utiliser DOMSubtreeModified. Toutefois, il est obsolète. Vous pouvez donc utiliser MutationObserver ou simplement détecter le nouveau contenu directement dans la fonction loadElement, sans avoir à attendre les événements DOM.
var ignoreFirst=0;
var observer = (new MutationObserver((m, ob)=>
{
if(ignoreFirst++>0) {
console.log('Element add on', new Date());
}
}
)).observe(content, {childList: true, subtree:true });
// simulate element loading
var tmp=1;
function loadElement(name) {
setTimeout(()=>{
console.log(`Element ${name} loaded`)
content.innerHTML += `<div>My name is ${name}</div>`;
},1500*tmp++)
};
loadElement('Michael');
loadElement('Madonna');
loadElement('Shakira');<div id="content"><div>Utilisez plutôt l’événement body.onload, soit via attribut (<body onload="myFn()"> ...), soit en liant un événement en Javascript. Ceci est extrêmement courant avec jQuery :
$(document).ready(function() {
doSomething($('#myDiv'));
});
Pour commencer, répondez à votre question: non, vous ne pouvez pas, pas directement comme vous le souhaitiez . Peut-être un peu tard pour répondre, mais ceci est ma solution, sans jQuery, javascript pur ..__ écrit à l'origine pour appliquer une fonction de redimensionnement à textareas après le chargement de DOM et en mode keyup.
De la même manière, vous pourriez l'utiliser pour faire quelque chose avec (tous) ou un seul, si spécifié, comme suit:
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 vous avez vraiment besoin de faire quelque chose avec un div, chargé après le chargement du DOM, par exemple, après un appel ajax, vous pouvez utiliser un hack très utile, qui est facile à comprendre et vous le trouverez ... travailler avec des éléments avant que le domaine ne soit prêt ... . Il dit "avant que le DOM ne soit prêt" mais il fonctionne parfaitement de la même manière, après une insertion ajax ou js-appendChild-que ce soit d'un div. Voici le code, avec quelques changements minimes à mes besoins.
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);
Vous pouvez utiliser un intervalle pour le vérifier jusqu'à ce qu'il se charge comme suit: 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);
Étant donné que l'événement onload n'est pris en charge que par quelques éléments, vous devez utiliser une autre méthode.
Vous pouvez utiliser un MutationObserver pour cela:
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>