нагрузки JSON-файл во время выполнения

Question

У меня есть HTML-файл с скриптом

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

где 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} 
]} 

и файл JS:

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

и у меня есть clusterTral. tral правильно кормили.

Позже мне нужно определить и использовать файл tralBA.json в RunTime. Я пытаюсь сделать это с помощью следующей функции

функции showClusterTral (р) {

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; 
..... 

}

, но я получаю ошибку "Uncaught ReferenceError: datiTral не определен" Как может я решать? Спасибо.

Answer 1

Причина в том, что тег сценария по-прежнему загружается, когда выполняется код, который ссылается на значение. Это можно доказать, ссылаясь на значение загружаемой переменной сразу после вызова файла сценария и снова через одну секунду (вам может потребоваться изменить значение таймаута в вашей конфигурации). В ближайших тестовых журналах [undefined] и журнале с задержкой отображается значение tral-объекта.

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 

В других случаях извлекающих сценариев мы спрашиваем является асинхронным - JS ведет со следующей строкой, не дожидаясь сценарий, чтобы прибыть. Тогда ответом будет некоторый тип запроса ajax.

Примечание: загрузка сценария таким образом известна как инъекция скрипта, и это обсуждается под баннером «JSONP», где используется для преодоления политик одного и того же происхождения. Несмотря на то, что в этом стиле вводится скрипт междоменного скрипта 'can', вы должны подумать о рисках, связанных с некоторыми черными шляпами, которые изменяют невинный исходный сценарий, который вы ожидаете. В основном не вводите сценарий, которым вы не контролируете.

И поэтому к решению - быстрое чтение Dave Walsh Blog on the subject приводит к ответу ниже. Обратите внимание, что для этого требуется JQuery - не указано, что это должно быть чистым решением JS так что надеюсь, это жизнеспособный для вас:

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 

Разница здесь в том, что использование доставленного переменной теперь зависит от done вилки из функции getScript(), то есть мы не будем ссылаться на переменную из загруженного сценария, пока файл не будет загружен в контексте JS браузера. Существует также обработчик fail, который мы можем использовать, чтобы изящно обрабатывать любые непредвиденные проблемы, которые означают, что сценарий не загружается.

Я не могу добавить это как фрагмент, поскольку он относится к внешнему файлу, но если вы запустили выше на веб-странице и сохранили файл tralBA.json, как определено OP, то все это работает.