laden JSON-Datei zur Laufzeit

Question

Ich habe HTML-Datei mit Skript

<script src="tralBA.json" type="text/javascript"></script> 

wo tralBA.json:

var datiTral = { 
    "tral": 
    [ 
     {"trl_id": "BA_01", "longitude": 16.58, "latitude": 41.09}, 
     {"trl_id": "BA_02", "longitude": 16.578, "latitude": 41.112}, 
     {"trl_id": "BA_03", "longitude": 16.544, "latitude": 41.09}, 
     {"trl_id": "BA_04", "longitude": 16.556, "latitude": 41.08},   
     {"trl_id": "BA_05", "longitude": 16.580, "latitude": 41.085},  
     {"trl_id": "BA_06", "longitude": 16.590, "latitude": 41.096} 
]} 

und eine JS-Datei:

....... 
var clusterTral = {}; 
clusterTral.tral = null; 
clusterTral.tral = datiTral.tral; 

und i clusterTral haben. tral hat richtig satt.

Später muss ich meine TralBA.json Datei bei RunTime definieren und verwenden. ich versuche, es durch die folgende Funktion zu tun

Funktion showClusterTral (pv) {

var filename = "tral" + pv + ".json"; 
var head = document.getElementsByTagName('head')[0]; 
var script = document.createElement('script'); 
script.setAttribute('type', 'text/javascript'); 
script.setAttribute('src', filename); 
document.head.appendChild(script); 
clusterTral.tral = datiTral.tral; 
..... 

}

aber ich habe den Fehler: "Uncaught Reference datiTral nicht definiert ist" Wie kann ich lösen? Vielen Dank.

Answer 1

Der Grund für das Problem ist, dass das Skript-Tag noch geladen wird, wenn der Code ausgeführt wird, der auf den Wert verweist. Dies kann durch den Verweis auf den Wert der geladenen Variablen unmittelbar nach dem Aufruf der Skriptdatei und erneut eine Sekunde später nachgewiesen werden (möglicherweise müssen Sie den Zeitüberschreitungswert in Ihrer Konfiguration ändern). Die unmittelbaren Testprotokolle "[undefiniert]" und das verzögerte Protokoll zeigen den Wert des tral-Objekts an.

function showClusterTral(pv) { 

var filename = "tral" + pv + ".json"; 
var head = document.getElementsByTagName('head')[0]; 
var script = document.createElement('script'); 
script.setAttribute('type', 'text/javascript'); 
script.setAttribute('src', filename); 
document.head.appendChild(script); 
var clusterTral = {}; 
try { 
    clusterTral.tral = datiTral.tral; 
    console.log('Immeditate tral=' + JSON.stringify(clusterTral.tral)) 
    } 
catch (err) { 
    console.log('Immeditate tral=[not defined]') 
    } 
setTimeout(function(){ 
    clusterTral.tral = datiTral.tral; 
    console.log('Delayed tral=' + JSON.stringify(clusterTral.tral)) 
    }, 1000) 
} 

showClusterTral("BA") // kick off the function 

In anderen Worten das Skript holen wir verlangen, ist Asynchron - die JS trägt von der nächsten Zeile auf, ohne abzuwarten, das Skript zu gelangen. Die Antwort wird dann eine Art von Ajax-Anfrage sein.

Hinweis: Das Laden von Skripten auf diese Weise wird als Skript-Injektion bezeichnet und wird unter dem Begriff "JSONP" ausführlich besprochen, wo es zur Überwindung derselben Richtlinien verwendet wird. Während Cross-Domain-Skript-Injektion in diesem stylee 'can' getan werden kann, sollten Sie über die Risiken einiger Black-Hat die unschuldigen Quelltext, den Sie erwarten, zu ändern. Im Grunde injizieren Sie kein Skript, über das Sie keine Kontrolle haben.

Und so zur Lösung - ein schneller Lese von Dave Walsh Blog on the subject führt zu der Antwort unten. Beachten Sie, dass dieser JQuery erforderlich - Sie nicht angeben, dass dies eine reine JS Lösung sein muss, so hoffentlich ist dies machbar für Sie:

function showClusterTral(pv) { 

var clusterTral = {}; 

jQuery.getScript("tral" + pv + ".json") 
    .done(function() { 
     /* yay, all good, do something */ 
     clusterTral.tral = datiTral.tral; 
     console.log('Delayed tral=' + JSON.stringify(clusterTral.tral))  
    }) 
    .fail(function() { 
     /* boo, fall back to something else */ 
     console.log("Some error in the path maybe ?") 
}); 

} 

showClusterTral("BA") // kick off the function 

Der Unterschied besteht darin, dass die Verwendung der gelieferten variablen hängt nun von der done Gabel der getScript() Funktion feuern, dh wir beziehen uns nicht auf die Variable aus dem geladenen Skript, bis die Datei im JS-Kontext des Browsers geladen ist. Es gibt auch einen fail-Handler, mit dem wir alle unerwarteten Probleme, die dazu führen, dass das Skript nicht geladen wird, problemlos behandeln können.

Ich kann dies nicht als Snippet hinzufügen, da es sich auf eine externe Datei bezieht, aber wenn Sie oben in einer Webseite Chuck und speichern Sie die tralBA.json Datei wie vom OP definiert, dann funktioniert alles.