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正确地厌倦了。

稍后我需要在RunTime中定义和使用我的tralBA.json文件。我尝试通过以下功能

来做到这一点

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);  
clusterTral.tral = datiTral.tral;
.....

}

但我收到错误＆＃34;未捕获的ReferenceError：未定义datiTral＆＃34; 我怎么解决？谢谢。

Answer 1

问题的原因是，当执行引用该值的代码时，脚本标记仍在加载。这可以通过在调用脚本文件后立即引用加载变量的值来证明，并在一秒后再次引用（您可能需要更改配置中的超时值）。即时测试日志＆＃39; [undefined]＆＃39;延迟日志显示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＆＃39;它用于克服同源政策。虽然在这个样式 ＆＃39; 中完成跨域脚本注入，但您应该考虑一些黑帽修改无辜源脚本的风险期待着。基本上不要注入你无法控制的脚本。

对于解决方案 - 快速阅读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处理程序来优雅地处理意味着脚本无法加载的任何意外问题。

我无法将其添加为片段，因为它引用了外部文件，但如果您将上述内容放入网页中并保存OP定义的tralBA.json文件，那么一切正常。

在运行时加载JSON文件

1 个答案: