2017-04-13 3 views
0

Ich habe einen IFrame in einem anderen Dokument, wo ich eine D3-Animation setzen möchte. Da ich keinen Zugriff auf die Dateien der Hauptseite habe, lade ich den src dynamisch.Dynamisches Laden der externen Bibliothek schlägt fehl

Die Sache ist, wenn ich eine alert() zwischen Funktion, die die Bibliothek lädt und Funktion, die es verwendet alles funktioniert. Aber ohne es (das ist was ich suche) bekomme ich den Konsolenfehler, dass d3 unbekannt ist.

Ich habe versucht, die d3Check() in window.onload, versuchte ich es in setTimeout setzen, aber kein Glück.

Warum passiert das und wie lässt es sich reibungslos und ohne Warnmeldungen entwickeln?

<!DOCTYPE html> 
<html> 
<body> 

<input id="btn" type="button" value="Click me"/> 

<script> 

function d3Load() { 
    var jsElm = document.createElement("script"); 
    jsElm.type = "text/javascript"; 
    jsElm.src = "https://d3js.org/d3.v4.min.js"; 
    jsElm.charset = "utf-8"; 
    document.head.appendChild(jsElm); 
//debugger; 
}; 
//debugger; 

function d3Check() { 
var a = d3.select("body"); 
alert("good"); 
}; 

d3Load(); 
alert(); 
d3Check(); 

</script> 

</body> 
</html> 

Antwort

2

Nach dem Einstellen des src Attributs jsElem, wird die Quelle asynchron im Hintergrund geladen werden, so dass Sie für den Laden warten sollen, können bis zum Ende, bis Sie fortfahren. Dies kann mit dem onload Attribut des script Tag erfolgen: https://developer.mozilla.org/de/docs/Web/API/HTMLScriptElement

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 
<input id="btn" type="button" value="Click me"/> 
 

 
<script> 
 

 
function d3Load() { 
 
    var jsElm = document.createElement("script"); 
 
    jsElm.type = "text/javascript"; 
 
    jsElm.src = "https://d3js.org/d3.v4.min.js"; 
 
    jsElm.charset = "utf-8"; 
 
    jsElm.onload = d3Check; 
 
    document.head.appendChild(jsElm); 
 
}; 
 

 

 
function d3Check() { 
 
var a = d3.select("body"); 
 
alert("good"); 
 
}; 
 

 
d3Load(); 
 

 
</script> 
 

 
</body> 
 
</html>

+0

Danke, aber ich habe das gleiche Ergebnis. Ich habe das ImportScript angewendet, das Sie erwähnt haben, und es lädt die Bibliothek korrekt in die , aber es wird nicht verwendet. Mit alert() zwischen Laden und Benutzen - wieder funktioniert alles. Ich versuchte auch, den Code zu zwingen, 5 Sekunden zu warten, bevor ich versuche, es anzuwenden, aber es scheint, ohne mich auf die Warnung zu klicken, lädt es einfach nicht – Zenon

+0

@Zenon, fügte ich einen Codeschnippet hinzu, der volzos Vorschlag detailliert. – Mark

+0

Funktioniert, vielen Dank Jungs! – Zenon

0

Sie müssen sich für das Skript des Ladeereignis warten, bevor Sie versuchen, eine der Methoden zu verwenden, die es enthält.

jsElm.onload = d3Check(); 

Mehr Details here

+0

Verstanden, danke Mann! – Zenon