Comment ajoutez-vous un onloadévénement à un élément?
Puis-je utiliser:
<div onload="oQuickReply.swap();" ></div>pour ça?
divles éléments ne se "chargent" pas.
Réponses:
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>
... pour ne pas empêcher le chargement du contenu suivant.
</body>. fe si vous voulez masquer le <div>seul si javascript est activé mais évitez de "flasher". Le temps de visibilité dépend du temps dont le navigateur a besoin pour charger / analyser tous les scripts en ligne / externes.
onload
L' onloadévénement ne peut être utilisé que sur document(body)lui - 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 . Le div n'est pas une ressource externe et il est chargé en tant que partie du corps, donc l' onloadévénement ne s'y applique pas.
onloadne fonctionnent donc sur aucun <script>sans srcattribut HTML (j'essayais d'utiliser ces conseils dans un script en ligne, et j'ai constaté que cela ne fonctionnait pas)
Vous pouvez déclencher certains js automatiquement sur un élément IMG en utilisant onerror, et pas de src.
<img src onerror='alert()'>événement onload qu'il ne prend en charge qu'avec quelques balises comme celles répertoriées ci-dessous.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>Voici la référence pour l'événement onload
Essaye ça! Et n'utilisez jamais le déclencheur deux fois sur div!
Vous pouvez définir la fonction à appeler avant la balise div.
$(function(){
$('div[onload]').trigger('onload');
});
DÉMO: jsfiddle
onload), puis appelle ces fonctions. Le script fonctionne même si vous changez l'attribut en autre chose que onloadpar exemple jsfiddle.net/mrszgbxh
Je veux juste ajouter ici que si quelqu'un veut appeler une fonction lors de l'événement de chargement de div et que vous ne voulez pas utiliser jQuery (en raison d'un conflit comme dans mon cas), alors appelez simplement une fonction après tout le code html ou tout 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>OU
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>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>En novembre 2019, je cherche un moyen de créer un (hypothétique) onparse EventListenerpour <elements>lequel ne tient pas onload.
(Hypothétique) onparse EventListenerdoit être capable d'écouter lorsqu'un élément est analysé .
J'étais assez satisfait de la deuxième tentative ci-dessous, mais il m'a juste semblé que je pouvais rendre le code plus court et plus simple, en créant un événement sur mesure:
let parseEvent = new Event('parse');C'est encore la meilleure solution.
L'exemple ci-dessous:
parse Eventwindow.onloadtout moment ou à tout moment) qui:
data-onparseparse EventListenerà chacun de ces élémentsparse Eventà chacun de ces éléments pour exécuter leCallbackExemple de travail:
// 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>La première tentative ci-dessous (basée sur @JohnWilliams«brillant Empty Image Hack ) a utilisé un code dur <img />et a fonctionné.
J'ai pensé qu'il devrait être possible de supprimer <img />entièrement le code dur et de ne l'insérer dynamiquement qu'après avoir détecté, dans un élément qui devait déclencher un onparseévénement, un attribut comme:
data-onparse="run-oQuickReply.swap()"Il s'avère que cela fonctionne très bien.
L'exemple ci-dessous:
data-onparse<img src />et l'ajoute au document, immédiatement après chacun de ces élémentsonerror EventListenerlorsque le moteur de rendu analyse chaque<img src />Callback et supprime celui généré dynamiquement à <img src />partir du documentExemple de travail:
// 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>Je peux construire sur @JohnWilliams' <img src>hack (sur cette page, à partir de 2017) - qui est, jusqu'à présent, la meilleure approche que j'ai rencontrée.
L'exemple ci-dessous:
onerror EventListenerlorsque le moteur de rendu analyse<img src />Callback et supprime le <img src />du documentExemple de travail:
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 />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 d'exécuter du code d'initialisation après l'insertion d'un morceau de code HTML (instance de modèle), et bien sûr, 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 a <div>.
Il y a quelque temps, j'ai fait un hack avec l'événement onload d'un <img>contenu presque invisible contenu dans un <div>, mais j'ai découvert qu'un style vide et de portée fera également l'affaire:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>Mise à jour (15 juillet 2017) - La <style>surcharge n'est pas prise en charge dans la dernière version d'IE. Edge le prend en charge, mais certains utilisateurs le voient comme un navigateur différent et s'en tiennent à IE. L' <img>élément 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 src en ligne qui la garde petite et transparente.
Un commentaire que je pense avoir besoin de faire à propos de l'utilisation de <script>est combien il est difficile de déterminer de quel <div>script est proche, en particulier dans les modèles où vous ne pouvez pas avoir un identifiant identique dans chaque instance que le modèle génère. Je pensais que la réponse pourrait être document.currentScript, mais ce n'est pas universellement pris en charge. Un <script>élément 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 n'est d'aucune utilité.
Je crois qu'il est nécessaire de se contenter d'utiliser un <img>élément, même s'il est maladroit. Cela pourrait être un trou dans le cadre DOM / javascript qui pourrait utiliser le branchement.
Étant donné que l' onloadévénement n'est pris en charge que sur 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>J'aime vraiment la bibliothèque YUI3 pour ce genre de choses.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})onload.
J'apprends javascript et jquery et passais par toutes les réponses, j'ai rencontré le même problème lors de l'appel de 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 est cette bonne façon d'effectuer l'appel onload sur l'élément div de la même manière que j'ai utilisé le sélecteur jquery.
Merci
Comme cela a été dit, vous ne pouvez pas utiliser à la place un événement onLoad sur un DIV mais avant la balise body.
mais dans le cas où vous avez un fichier de pied de page et que vous l'incluez dans plusieurs pages. il est préférable de vérifier d'abord si le div que vous voulez est sur cette page affichée, afin que le code ne soit pas exécuté dans les pages qui ne contiennent pas ce DIV pour le charger plus rapidement et gagner du temps pour votre application.
vous devrez donc donner un ID à cette DIV et faire:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}J'avais la même question et essayais d'obtenir un Div pour charger un script de défilement, en utilisant onload ou load. Le problème que j'ai trouvé était que cela fonctionnerait toujours avant que la Div ne puisse s'ouvrir, pas pendant ou après, donc ça ne marcherait pas vraiment.
Ensuite, j'ai trouvé cela en guise de solution.
<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'un Span et ai donné au Span deux événements, un survol et un déplacement. Ensuite, en dessous de cette Div, j'ai placé un lien pour ouvrir la Div et j'ai donné à ce lien un événement pour onclick. Tous les événements sont identiques, pour faire défiler la page vers le bas de la page. Maintenant, lorsque le bouton pour ouvrir le Div est cliqué, la page sautera à mi-chemin et le Div s'ouvrira au-dessus du bouton, provoquant les événements mouseover et mouseout pour aider à pousser le script de défilement vers le bas. Ensuite, tout mouvement de la souris à ce point poussera le script une dernière fois.
Vous pouvez utiliser un intervalle pour le vérifier jusqu'à ce qu'il se charge comme ceci: 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);D'abord pour répondre à votre question: non, vous ne pouvez pas, pas directement comme vous le vouliez. Peut-être un peu tard pour répondre, mais c'est ma solution, sans jQuery, pur javascript. Il a été écrit à l'origine pour appliquer une fonction de redimensionnement aux zones de texte après le chargement du DOM et à la clé.
De la même manière, vous pouvez l'utiliser pour faire quelque chose avec (toutes) les divs ou une seule, si spécifié, comme ceci:
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 ... working-with- éléments avant-le-dom-est prêt ... . Il dit "avant que le DOM ne soit prêt" mais il fonctionne de la même manière, après une insertion ajax ou js-appendChild-quoi que ce soit d'un div. Voici le code, avec quelques petits changements à 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);Lorsque vous chargez du code HTML à partir du serveur et l'insérez dans l'arborescence DOM, vous pouvez l'utiliser DOMSubtreeModifiedcomme il est obsolète - vous pouvez donc utiliser MutationObserverou simplement détecter directement le nouveau contenu dans la fonction loadElement afin que vous n'ayez pas besoin d'attendre les événements DOM
Vous pouvez joindre un écouteur d'événements comme ci-dessous. Il se déclenchera chaque fois que le div ayant le sélecteur se #my-idcharge complètement dans DOM.
$(document).on('EventName', '#my-id', function() {
// do something
});Dans ce cas, EventName peut être «charger» ou «cliquer»
Essaye ça.
document.getElementById("div").onload = alert("This is a div.");<div id="div">Hello World</div>Essayez celui-ci aussi. Vous devez supprimer .de oQuickReply.swap()pour que la fonction fonctionne.
document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}<div id="div"></div>alert("This is a div.");appelé lorsque cette ligne est exécutée et que le résultat (qui est undefined) est affecté à div.onload. Ce qui est complètement inutile.
Vous ne pouvez pas ajouter d'événement onload sur div, mais vous pouvez ajouter onkeydown et déclencher un événement onkeydown lors du chargement du document
$(function ()
{
$(".ccsdvCotentPS").trigger("onkeydown");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div onkeydown="setCss( );"> </div>`
bodymieuxdiv