Wie fügt man eine hinzu? onload
man einem Element Ereignis hinzu?
Kann ich benutzen:
<div onload="oQuickReply.swap();" ></div>
dafür?
div
Elemente "laden" nicht.
Wie fügt man eine hinzu? onload
man einem Element Ereignis hinzu?
Kann ich benutzen:
<div onload="oQuickReply.swap();" ></div>
dafür?
div
Elemente "laden" nicht.
Antworten:
Nein, das kannst du nicht. Der einfachste Weg, dies zum Laufen zu bringen, besteht darin, den Funktionsaufruf direkt nach dem Element zu setzen
Beispiel:
...
<div id="somid">Some content</div>
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
...
oder - noch besser - direkt vor </body>
:
...
<script type="text/javascript">
oQuickReply.swap('somid');
</script>
</body>
... damit das Laden des folgenden Inhalts nicht blockiert wird.
</body>
. Zum Beispiel, wenn Sie das <div>
nur ausblenden möchten, wenn Javascript aktiviert ist, aber "blinken" vermeiden möchten . Die Sichtbarkeitszeit hängt davon ab, wie lange der Browser alle Inline- / externen Skripte laden / analysieren muss.
onload
Das onload
Ereignis kann nur für sich document(body)
selbst, Frames, Bilder und Skripte verwendet werden. Mit anderen Worten, es kann nur an den Körper und / oder jede externe Ressource angehängt werden . Das div ist keine externe Ressource und wird als Teil des Körpers geladen, sodass das onload
Ereignis dort nicht angewendet wird.
onload
nicht funktionieren (ich habe versucht, diesen Rat in einem Inline-Skript zu verwenden, und festgestellt, dass er nicht funktioniert)<script>
src
Sie können einige js automatisch für ein IMG-Element mit onerror und ohne src auslösen.
<img src onerror='alert()'>
Onload-Ereignis wird nur mit wenigen Tags unterstützt, wie unten aufgeführt.
<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>
Hier die Referenz für das Onload-Ereignis
Versuche dies! Und benutze niemals zweimal den Auslöser für div!
Sie können die Funktion definieren, die vor dem div-Tag aufgerufen werden soll.
$(function(){
$('div[onload]').trigger('onload');
});
DEMO: jsfiddle
onload
), und ruft dann diese Funktionen auf. Das Skript funktioniert auch, wenn Sie das Attribut in etwas anderes als onload
z. B. jsfiddle.net/mrszgbxh
Ich möchte hier nur hinzufügen, dass, wenn jemand eine Funktion beim Laden von div aufrufen möchte und Sie jQuery nicht verwenden möchten (aufgrund von Konflikten wie in meinem Fall), einfach eine Funktion nach dem gesamten HTML-Code oder einem anderen aufrufen möchten anderer Code, den Sie geschrieben haben, einschließlich des Funktionscodes, und rufen Sie einfach eine Funktion auf.
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function_name();
</script>
ODER
/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
function my_func(){
function definition;
}
my_func();
</script>
Wir können MutationObserver verwenden, um das Problem auf effiziente Weise zu lösen, indem wir unten einen Beispielcode hinzufügen
<!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>
Im November 2019 suche ich nach einer Möglichkeit, eine (hypothetische) zu erstellen, onparse
EventListener
für <elements>
die es keine gibt onload
.
Das (hypothetische) onparse
EventListener
muss in der Lage sein zu hören, wenn ein Element analysiert wird .
Ich war ziemlich zufrieden mit dem zweiten Versuch unten, aber es fiel mir auf, dass ich den Code kürzer und einfacher machen kann, indem ich ein maßgeschneidertes Ereignis erstelle:
let parseEvent = new Event('parse');
Dies ist die bisher beste Lösung.
Das folgende Beispiel:
parse
Event
window.onload
), die:
data-onparse
parse
EventListener
an jedes dieser Elemente anparse
Event
an jedes dieser Elemente, um das auszuführenCallback
Arbeitsbeispiel:
// 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>
Der erste Versuch unten (basierend auf @JohnWilliams
'Brillant Empty Image Hack' ) verwendete einen fest codierten<img />
und funktionierenden.
Ich dachte, es sollte möglich sein, das fest codierte <img />
Element vollständig zu entfernen und es nur dynamisch einzufügen, nachdem in einem Element, das ein onparse
Ereignis auslösen musste, ein Attribut wie das folgende festgestellt wurde :
data-onparse="run-oQuickReply.swap()"
Es stellt sich heraus, dass dies sehr gut funktioniert.
Das folgende Beispiel:
data-onparse
<img src />
und hängt es unmittelbar nach jedem dieser Elemente an das Dokument anonerror
EventListener
wenn die Rendering-Engine jeweils analysiert<img src />
Callback
und entfernt das dynamisch <img src />
aus dem Dokument generierteArbeitsbeispiel:
// 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>
Ich kann auf @JohnWilliams
' <img src>
Hack ' aufbauen (auf dieser Seite ab 2017) - das ist bisher der beste Ansatz, den ich je gesehen habe.
Das folgende Beispiel:
onerror
EventListener
wenn die Rendering-Engine analysiert wird<img src />
Callback
und entfernt es <img src />
aus dem DokumentArbeitsbeispiel:
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 />
Verwenden Sie einen Iframe und blenden Sie ihn aus. Iframe funktioniert wie ein Body-Tag
<!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>
Nach dem Einfügen eines Teils von HTML (Vorlageninstanz) musste ein Initialisierungscode ausgeführt werden, und natürlich hatte ich keinen Zugriff auf den Code, der die Vorlage manipuliert und das DOM ändert. Die gleiche Idee gilt für jede teilweise Änderung des DOM durch Einfügen eines HTML-Elements, normalerweise a<div>
.
Vor einiger Zeit habe ich einen Hack mit dem Onload-Ereignis eines fast unsichtbaren gemacht <img>
in einem enthalten <div>
, aber entdeckt , dass ein scoped, leerer Stil wird auch tun:
<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" > </style>
.....
</div>
Update (15. Juli 2017) - Die <style>
Onload wird in der letzten Version des IE nicht unterstützt. Edge unterstützt es zwar, aber einige Benutzer sehen dies als einen anderen Browser und bleiben beim IE. Das <img>
Element scheint in allen Browsern besser zu funktionieren.
<div...>
<img onLoad="dosomthing(this.parentElement);" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" />
...
</div>
Verwenden Sie einen Inline-Quellcode, der das Bild klein und transparent hält, um die visuelle Auswirkung und den Ressourcenverbrauch des Bildes zu minimieren.
Ein Kommentar, den ich zur Verwendung von a machen muss, <script>
ist, wie viel schwieriger es ist, festzustellen, welche<div>
Nähe sich das Skript befindet, insbesondere bei Vorlagen, bei denen Sie nicht in jeder von der Vorlage generierten Instanz eine identische ID haben können. Ich dachte, die Antwort könnte document.currentScript sein, aber dies wird nicht allgemein unterstützt. Ein <script>
Element kann seinen eigenen DOM-Standort nicht zuverlässig bestimmen. Ein Verweis auf "dies" verweist auf das Hauptfenster und ist nicht hilfreich.
Ich glaube, es ist notwendig, sich mit der Verwendung eines <img>
Elements zufrieden zu geben, obwohl es doof ist. Dies könnte eine Lücke im DOM / Javascript-Framework sein, die das Einstecken verwenden könnte.
Da das onload
Ereignis nur von wenigen Elementen unterstützt wird, müssen Sie eine alternative Methode verwenden.
Sie können hierfür einen MutationObserver verwenden :
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>
Ich mag die YUI3-Bibliothek für solche Dinge wirklich.
<div id="mydiv"> ... </div>
<script>
YUI().use('node-base', function(Y) {
Y.on("available", someFunction, '#mydiv')
})
onload
.
Ich lerne Javascript und JQuery und habe die ganze Antwort durchgearbeitet. Beim Aufruf der Javascript-Funktion zum Laden des div-Elements hatte ich das gleiche Problem. Ich habe es versucht$('<divid>').ready(function(){alert('test'})
und es hat bei mir funktioniert. Ich möchte wissen, ob dies eine gute Möglichkeit ist, einen Onload-Aufruf für das div-Element so auszuführen, wie ich es mit dem jquery-Selektor getan habe.
Vielen Dank
Wie gesagt, Sie können das onLoad-Ereignis nicht auf einem DIV verwenden, sondern vor dem Body-Tag.
aber für den Fall, dass Sie eine Fußzeilendatei haben und diese auf vielen Seiten einfügen. Es ist besser, zuerst zu überprüfen, ob das gewünschte Div auf dieser Seite angezeigt wird, damit der Code nicht auf den Seiten ausgeführt wird, die dieses DIV nicht enthalten, damit es schneller geladen wird und Zeit für Ihre Anwendung gespart wird.
Sie müssen diesem DIV also eine ID geben und Folgendes tun:
var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
Ich hatte die gleiche Frage und versuchte, eine Div dazu zu bringen, ein Bildlaufskript mit Onload oder Load zu laden. Das Problem, das ich fand, war, dass es immer funktionieren würde, bevor die Div geöffnet werden konnte, nicht während oder nach, also würde es nicht wirklich funktionieren.
Dann habe ich mir das als Workaround ausgedacht.
<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>
Ich platzierte die Div in einer Spanne und gab der Spanne zwei Ereignisse, ein Mouseover und ein Mouseout. Dann platzierte ich unter dieser Div einen Link, um die Div zu öffnen, und gab diesem Link ein Ereignis für einen Klick. Alle Ereignisse sind exakt gleich, damit die Seite zum Ende der Seite scrollen kann. Wenn Sie nun auf die Schaltfläche zum Öffnen des Div klicken, springt die Seite teilweise nach unten, und das Div wird über der Schaltfläche geöffnet, wodurch die Mouseover- und Mouseout-Ereignisse dazu beitragen, das Scroll-Down-Skript zu verschieben. Dann wird jede Bewegung der Maus an diesem Punkt das Skript ein letztes Mal drücken.
Sie können ein Intervall verwenden, um danach zu suchen, bis es wie folgt geladen wird : 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);
Beantworten Sie zuerst Ihre Frage: Nein, Sie können nicht, nicht direkt, wie Sie es wollten. Es mag etwas spät sein zu antworten, aber dies ist meine Lösung ohne jQuery, reines Javascript. Es wurde ursprünglich geschrieben, um eine Größenänderungsfunktion auf Textbereiche anzuwenden, nachdem DOM geladen und aufgeschlüsselt wurde.
Genauso wie Sie es verwenden könnten, um etwas mit (allen) Divs zu tun, oder nur mit einem, falls angegeben, wie folgt:
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);
});
Wenn Sie wirklich etwas mit einem Div tun müssen, das nach dem Laden des DOM geladen wird, z. B. nach einem Ajax-Aufruf, können Sie einen sehr hilfreichen Hack verwenden, der leicht zu verstehen ist und bei dem Sie feststellen werden, dass Sie mit ... arbeiten. Elemente-vor-dem-dom-ist-bereit ... . Es heißt "bevor das DOM fertig ist", aber es funktioniert genauso brillant, nach einer Ajax-Einfügung oder js-appendChild-was auch immer von einem Div. Hier ist der Code mit einigen winzigen Änderungen an meinen Anforderungen.
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);
Wenn Sie HTML vom Server laden und in den DOM-Baum einfügen, können Sie es verwenden, DOMSubtreeModified
es ist jedoch veraltet. Sie können also MutationObserver
neuen Inhalt in der loadElement-Funktion direkt verwenden oder nur erkennen, sodass Sie nicht auf DOM-Ereignisse warten müssen
Sie können einen Ereignis-Listener wie folgt anhängen. Es wird immer dann ausgelöst, wenn der Div mit dem Selektor #my-id
vollständig in das DOM geladen wird.
$(document).on('EventName', '#my-id', function() {
// do something
});
In diesem Fall kann EventName "Laden" oder "Klicken" sein.
Verwenden Sie stattdessen das Ereignis body.onload, entweder über attribute ( <body onload="myFn()"> ...
) oder durch Binden eines Ereignisses in Javascript. Dies ist bei jQuery sehr häufig :
$(document).ready(function() {
doSomething($('#myDiv'));
});
Versuche dies.
document.getElementById("div").onload = alert("This is a div.");
<div id="div">Hello World</div>
Versuchen Sie auch dieses. Sie müssen entfernen .
aus , oQuickReply.swap()
um die Funktion Arbeits zu machen.
document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}
<div id="div"></div>
alert("This is a div.");
aufgerufen, wenn diese Zeile ausgeführt und das Ergebnis (das ist undefined
) zugewiesen wird div.onload
. Welches ist völlig sinnlos.
Sie können kein Ereignis-Onload für div hinzufügen, aber Sie können ein Onkeydown-Ereignis hinzufügen und ein Onkeydown-Ereignis beim Laden des Dokuments auslösen
$(function ()
{
$(".ccsdvCotentPS").trigger("onkeydown");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div onkeydown="setCss( );"> </div>`
body
besserdiv