JavaScript nicht ausgeführt, wenn die Seite loaded` ist

Question

Ich habe eine html Datei und hat eine div ein enthält image src

<div id="imageoutput"><img id="imgoutput" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA"></div> 

ich einige der Base64 Daten hier ignoriert, weil es zu lang ist, nur für Ihre Bequemlichkeit lies den Code.

So habe ich eine javascript Datei in der HTML enthalten.

document.onload = function() { 
    var existingData = document.getElementById('imgoutput').src; 
} 

Ich will die src für dieses Bild erhalten, wenn die Seite geladen wird, aber scheint, wie wenn ich

console.log(existingData) 

es gibt mir diese Fehlermeldung die ganze Zeit

Uncaught ReferenceError: existingData is not defined 

aber wenn ich es tue

console.log(document.getElementById('imgoutput').src) 

Es gibt mir die image src

EDIT

Wenn ich tat dies alles falsch, was die Art und Weise, ist das Bild src aus und speichern sie in einer Variablen zu bekommen?

Answer 1

Wenn Sie console.log(existingData) nur durch auf Ihrer Seite, öffnen Dev-Tools, und tippen Sie es, dann der Grund für die Fehler oder ist einfach: Es wird nach einer globalen Variable suchen, und existingData ist kein globaler, Sie haben es als lokal innerhalb Ihrer onload-Funktion definiert.

Wenn Sie einen Haltepunkt in Ihrer onload Funktion in dev Tool setzen, die Seite neu zu laden, so dass es an diesem Haltepunkt stoppt, und die console.log, an diesem Punkt wird die Konsole für den Code Zugriff auf die Dinge in ihrem Umfang hat laufen, wo Der Haltepunkt ist und Sie werden den Wert sehen.

Wenn Sie die console.log in Ihrer onload Funktion tatsächlich schreiben   — allgemeine, wenn Sie existingData   — innerhalb dieser Funktion definiert wird, werden und (nach der Abtretung) haben einen Wert.

Je nachdem, wie/wo Sie es verwenden möchten, können die Antworten auf diese Frage auch nützlich sein: Wie gebe ich die Antwort von einem asynchronen Aufruf zurück?

Answer 2

Wahrscheinlich kommt der Fehler von woanders, weil Sie die Variable existingData verwenden, die Variable jedoch im onload-Bereich festgelegt ist, also nicht erreichbar ist.

Sie sollten die var Erklärung über die Wurzel setzen:

var existingData 
document.onload = function() { 
    existingData = document.getElementById('imgoutput').src; 
} 

EDIT

Diese Sie die Variable erreichen können, sollten Sie Ihre Methode in der onload nennen:

var existingData 
    document.onload = function() { 
     existingData = document.getElementById('imgoutput').src; 
     callmMyMethod(); 
    } 

Answer 3

Wie andere in den bereits geposteten Kommentaren/Antworten erwähnt haben, ist das Problem mit Ihrem Ansatz sowohl der Umfang als auch das Timing. JavaScript ist Funktionsumfang, dh die Variable existingData ist außerhalb des Funktionsumfangs window.onload nicht verfügbar. Sie können dies umgehen, indem Sie die Variable in den globalen Geltungsbereich verschieben, indem Sie die Deklaration var existingData; außerhalb der Funktion verschieben.

Das zweite Problem ist das Timing. Die onload-Funktion ist eine asynchrone Operation, dh eine einfache console.log außerhalb der window.onload Funktionsdeklaration wird weiterhin ein Ergebnis von undefined ergeben, da die asynchrone Operation nicht abgeschlossen wurde. Um dies zu umgehen, können Sie die native Implementierung von Promise und den bereitgestellten Callback verwenden, um das zu erreichen, was Sie suchen.

DEMO:

var existingData; 
 

 
function load(){ 
 
    return new Promise(function(resolve) { 
 
     if (document.readyState === "complete") { 
 
      existingData = document.querySelectorAll("img")[0].src; 
 
      return resolve(); 
 
     } 
 
     document.addEventListener("DOMContentLoaded", function() { 
 
      existingData = document.querySelectorAll("img")[0].src; 
 
      return resolve(); 
 
     }, false); 
 
    }); 
 
} 
 

 
load().then(function() { 
 
    alert(existingData); 
 
});

<img src="http://stackexchange.com/content/img/hero/vote.png" />

HINWEIS: Versprechen werden nicht in IE unterstützt, so müssen Sie möglicherweise eine Bibliothek verwenden, der diese Funktionalität sicher abstrahiert und stellt einen Rückfall für Browser mit nicht-nativer Unterstützung.