代码之家 › 专栏 › 技术社区 › kjdion84

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

onload jquery javascript

kjdion84 · 技术社区 · 8 年前

如果尚未加载,我有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>

我怎样才能使用动态加载的脚本呢?

1 回复 | 直到 8 年前

MTK 8 年前

您需要管理脚本加载事件和调用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();

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

8 月前

Dr.0000FF · jQuery按钮点击不显示/隐藏内容

8 月前

user28928120 · 如何在jquery中选择所有类?

9 月前

LauraNMS · 如何使用Waypoints js实现粘性元素和偏移量

9 月前