wake-up-neo.net

Wie füge ich ein onload-Ereignis zu einem div-Element hinzu?

Wie fügen Sie einem Element ein Onload-Ereignis hinzu? Kann ich benutzen:

<div onload="oQuickReply.swap();" ></div>

dafür?

184
monkey_boys

Nein, das kannst du nicht. Die einfachste Möglichkeit, dies zu erreichen, besteht darin, den Funktionsaufruf direkt hinter dem Element abzulegen 

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 der folgende Inhalt nicht geladen wird.

206
DanMan

Das onload-Ereignis kann nur für document(body) selbst, Frames, Bilder und Skripts verwendet werden. Mit anderen Worten, es kann nur an body und/oder an jede externe Ressource angehängt werden. Das div ist keine externe Ressource und es wird als Teil des Körpers geladen, sodass das onload-Ereignis dort nicht gilt.

66
kijin

Sie können einige Js für ein IMG-Element mithilfe von onerror und ohne src automatisch auslösen.

<img src onerror='alert()'>
42
John Williams

das Onload-Ereignis wird nur mit den unten aufgeführten Tags unterstützt.

<body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

Hier die Referenz für onload event

15
Samda

Versuche dies! Und benutze den Trigger niemals zweimal für div!

Sie können eine Funktion definieren, die vor dem div-Tag aufgerufen werden soll.

$(function(){
    $('div[onload]').trigger('onload');
});

DEMO: jsfiddle

12
Kuofp

Ich möchte hier nur hinzufügen, dass, wenn jemand eine Funktion beim Ladeereignis von div aufrufen möchte, Sie jQuery nicht verwenden möchten (aufgrund eines Konflikts wie in meinem Fall), dann rufen Sie einfach eine Funktion nach dem gesamten HTML-Code oder einem beliebigen Code auf 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>

OR

/* All Other Code*/
-----
------
/* ----At the end ---- */
<script type="text/javascript">
 function my_func(){
   function definition;      

  }

 my_func();
</script>
9
dev_khan

iframe verwenden und ausblenden 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>
6
Mr Singh

Nachdem ein Teil der HTML-Datei (Vorlageninstanz) eingefügt wurde, musste ein Initialisierungscode ausgeführt werden. Natürlich hatte ich keinen Zugriff auf den Code, der die Vorlage bearbeitet und das DOM ändert. Die gleiche Idee gilt für jede partielle Änderung des DOM durch Einfügen eines HTML-Elements, normalerweise ein <div>.

Vor einiger Zeit habe ich mit dem Onload-Ereignis eines fast unsichtbaren <img>, der in einem <div> enthalten ist, einen Hack gemacht, aber festgestellt, dass ein begrenzter, leerer Stil auch Folgendes bewirkt:

<div .... >
<style scoped="scoped" onload="dosomethingto(this.parentElement);" >   </style>
.....
</div>

Update (15. Juli 2017) - Das <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>

Um die visuellen Auswirkungen und die Ressourcennutzung des Bildes zu minimieren, verwenden Sie eine Inline-Quelle, die das Bild klein und transparent hält.

Ein Kommentar, den ich meiner Meinung nach über einen <script> machen muss, ist umso schwieriger zu bestimmen, welcher <div> das Skript in der Nähe ist, vor allem bei der Erstellung von Templates, bei denen keine identische id in jeder Instanz vorhanden ist, die die Vorlage generiert. Ich dachte, die Antwort könnte document.currentScript sein, dies wird jedoch nicht allgemein unterstützt. Ein <script>-Element kann seine eigene DOM-Position nicht zuverlässig bestimmen. ein Verweis auf 'this' verweist auf das Hauptfenster und ist nicht hilfreich.

Ich glaube, es ist notwendig, sich mit einem <img>-Element zufrieden zu geben, obwohl es doof ist. Dies kann eine Lücke im DOM/Javascript-Framework sein, die Plugging verwenden könnte.

5
Floyd Kosch

wir können MutationObserver verwenden, um das Problem auf effiziente Weise zu lösen, indem Sie 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>
4
user2364729

Ich mag die YUI3-Bibliothek für so etwas.

<div id="mydiv"> ... </div>

<script>
YUI().use('node-base', function(Y) {
  Y.on("available", someFunction, '#mydiv')
})

Siehe: http://developer.yahoo.com/yui/3/event/#onavailable

2
mjhm

Wie bereits gesagt, können Sie das onLoad-Ereignis nicht für ein DIV verwenden, sondern vor dem Body-Tag.

falls Sie jedoch eine Fußzeilendatei haben und diese auf vielen Seiten einfügen. Es ist besser, zuerst zu prüfen, ob das gewünschte div auf dieser Seite angezeigt wird. Der Code wird daher nicht auf den Seiten ausgeführt, auf denen das DIV nicht enthalten ist, damit es schneller geladen wird und Zeit für die Anwendung bleibt.

daher müssen Sie diesem DIV eine ID zuweisen und Folgendes tun:

var myElem = document.getElementById('myElementId');
if (myElem !== null){ put your code here}
0
Mostafa Yousef

Ich lerne Javascript und jquery und habe alle Antworten durchgearbeitet. Beim Aufruf der Javascript-Funktion zum Laden des div-Elements trat das gleiche Problem auf. Ich habe $('<divid>').ready(function(){alert('test'}) ausprobiert und es hat bei mir funktioniert. Ich möchte wissen, ob dies eine gute Methode ist, um einen Onload-Aufruf für ein div-Element so durchzuführen, wie ich es mit dem jquery-Selector getan habe.

vielen Dank

0
subro

Ich hatte die gleiche Frage und versuchte, ein Div zum Laden eines Scroll-Skripts mittels Onload oder Load zu veranlassen. Das Problem, das ich fand, war, dass es immer funktionieren würde, bevor die Div sich öffnen konnte, nicht während oder nach, also würde es nicht wirklich funktionieren.

Dann kam mir das als Workaround vor.

<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 legte die Div in einen Span und gab dem Span zwei Ereignisse, einen Mouseover und einen Mouseout. Dann habe ich unterhalb der Div einen Link zum Öffnen der Div eingefügt und diesem Link ein Ereignis für Onclick zugewiesen. Alle Ereignisse sind identisch, damit die Seite bis zum Seitenende nach unten scrollen kann. Wenn Sie jetzt auf die Schaltfläche zum Öffnen des Div klicken, springt die Seite etwas nach unten, und das Div wird über der Schaltfläche geöffnet. Dadurch werden die Mouseover- und Mouseout-Ereignisse unterstützt. Wenn Sie die Maus an diesem Punkt bewegen, wird das Skript ein letztes Mal verschoben.

0
Selective

Wenn Sie HTML-Dateien vom Server laden und in den DOM-Baum einfügen, können Sie DOMSubtreeModified verwenden, dies ist jedoch veraltet. Sie können also MutationObserver verwenden oder nur neuen Inhalt in der loadElement-Funktion direkt erkennen, damit Sie nicht auf DOM-Ereignisse warten müssen

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>
0

Verwenden Sie stattdessen das Ereignis body.onload, entweder über das Attribut (<body onload="myFn()"> ...) oder durch Binden eines Ereignisses in Javascript. Dies ist sehr häufig bei jQuery :

$(document).ready(function() {
    doSomething($('#myDiv'));
});
0
mway

Zuerst um Ihre Frage zu beantworten: Nein, Sie können es nicht, nicht direkt so, wie Sie dies tun wollten . Vielleicht etwas spät zu beantworten, aber dies ist meine Lösung ohne jQuery, reines Javascript Ursprünglich geschrieben, um eine Größenänderungsfunktion auf Textbereiche anzuwenden, nachdem DOM geladen wurde und beim Keyup.

Auf dieselbe Weise können Sie es verwenden, um etwas mit (allen) divs zu tun oder nur mit einem, falls angegeben, wie:

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 machen müssen, das nach dem Laden des DOM geladen wird, z. Nach einem Ajax-Aufruf könnten Sie einen sehr hilfreichen Hack verwenden, der leicht zu verstehen ist und Sie finden ihn ... mit -Elementen arbeiten, bevor der Dom fertig ist ... . Es sagt "bevor das DOM fertig ist", aber es funktioniert genauso brillant, nach einem Ajax-Insert oder js-appendChild-wie auch immer von einem div. Hier ist der Code mit einigen kleinen Änderungen an meinen Bedürfnissen.

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);
0
ddlab

Sie können ein Intervall verwenden, um danach zu suchen, bis es folgendermaßen 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);
0
Robert Page

Da das Ereignis onload nur für einige Elemente unterstützt wird, müssen Sie eine alternative Methode verwenden.

Sie können dazu 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>
0
jo_va

Versuche dies.

document.getElementById("div").onload = alert("This is a div.");
<div id="div">Hello World</div>

Probieren Sie auch diesen aus. Sie müssen . Aus oQuickReply.swap() entfernen, damit die Funktion funktioniert.

document.getElementById("div").onload = oQuickReplyswap();
function oQuickReplyswap() {
alert("Hello World");
}
<div id="div"></div>
0
user9539919