加载脚本，如果尚未加载，然后使用它们

我有4个JavaScript库我想加载如果尚未加载。然后，我想使用他们的功能。加载脚本，如果尚未加载，然后使用它们

我的问题是，我得到Uncaught ReferenceError: sbjs is not defined，脚本得到加载，但我实际上不能使用它们。

如果它们尚未加载，我已将它完美地工作到它将在</body>标记上方添加脚本的位置，但我似乎无法让它们工作。

这里是我的代码：

<script> 
    window.onload = myapp_scripts; 

    function myapp_scripts() { 
     var myapp_script; 

     if (!window.jQuery) { 
     myapp_script = document.createElement('script'); 
     document.body.appendChild(myapp_script); 
     myapp_script.src = 'http://myapp.dev/js/jquery.min.js'; 
     console.log('load jquery'); 
     } 
     if (!window.Cookies) { 
     myapp_script = document.createElement('script'); 
     document.body.appendChild(myapp_script); 
     myapp_script.src = 'http://myapp.dev/js/cookie.min.js'; 
     console.log('load cookies'); 
     } 
     if (typeof url == 'undefined') { 
     myapp_script = document.createElement('script'); 
     document.body.appendChild(myapp_script); 
     myapp_script.src = 'http://myapp.dev/js/url.min.js'; 
     console.log('load url'); 
     } 
     if (typeof sbjs == 'undefined') { 
     myapp_script = document.createElement('script'); 
     document.body.appendChild(myapp_script); 
     myapp_script.src = 'http://myapp.dev/js/sourcebuster.min.js'; 
     console.log('load sbjs'); 
     } 

     myapp_init(); 
    } 

    function myapp_init() { 
     sbjs.init(); 

     console.log(Cookies.get('source_id')); 
     console.log(url('source_id')); 
     console.log(sbjs.get.current); 

     $('#myapp_form').submit(function (event) { 
      event.preventDefault(); 
      console.log('form submitted'); 
     }); 
    } 
</script>

我怎么做，所以我也可以用我动态加载的脚本？

来源

2017-07-24 kjdion84

[JS内部动态加载JS]的可能重复（https://stackoverflow.com/questions/14521108/dynamically-load-js-inside-js） – Chase

它比这更复杂。您只能在加载脚本后才能使用它们，您肯定知道这些脚本确实发生在每个'createElement'脚本的'onload'函数中。为什么不直接加载它们？ – Jorg

发生哪部分错误？某处在这里'sbjs.init（）;'或'if（typeof sbjs =='undefined'）' – smzapp

我觉得你的问题是因为myapp_init（）脚本加载之前你需要管理脚本加载事件和呼叫myapp_init（）

一些这样每个if（）条件内后执行：

var myapp_script; 

var scripts_loaded = 0; 

    if (!window.jQuery) { 
    myapp_script = document.createElement('script'); 
    document.body.appendChild(myapp_script); 
    myapp_script.src = 'http://myapp.dev/js/jquery.min.js'; 
    console.log('load jquery'); 

    myapp_script.onload = function(){ 
     scripts_loaded ++; 
     if(scripts_loaded === 4){ //4 because in your example you have 4 scripts to load 
      myapp_init(); 
     } 
    } 

    }else{ 
    scripts_loaded ++; 
    } 
//... 
//And so on with others if conditions

是不是一个优雅的解决方案，但只有一个想法：如果所有脚本都加载并在调用myapp_init（）之后以某种方式检查;

来源

2017-07-24 00:34:35 MTK

承诺的好用例 – charlietfl

你有理由。但这是我首先想到的解释这个想法 – MTK

加载脚本，如果尚未加载，然后使用它们

回答

相关问题