如何动态插入js文件

我想加载一些更加动态的js文件，因此我使用带有类名称的div对象来包装检查脚本。在检查脚本检查特定的js文件未加载后，它会为父div创建一个新的外部js文件字符串。但是，什么也没发生。以下代码显示了我如何检查是否已加载js文件以及如何插入脚本字符串。但结果是只有jQuery is not loaded被打印在控制台中。如何动态插入js文件

<div class="loadPagejQuery"> 
    <script> 
     if (window.jQuery) { 
      // jQuery is loaded 
      console.log("jQuery is loaded "); 
      } else { 
      // jQuery is not loaded 
      console.log("jQuery is not loaded "); 
      (function() { 
       // Load the script 
       var script = document.createElement("SCRIPT"); 
       script.src = '/Style/js/jquery-1.10.2.js'; 
       script.type = 'text/javascript'; 
       document.getElementsByClassName("loadPagejQuery")[0].appendChild(script); 
      })(); 
     } 
    </script> 
</div> 

<script id="the_jquery_ui" src="/Style/jquery-ui-1.12.1/jquery-ui.js"></script>//Uncaught ReferenceError: $ is not defined 
<link rel="stylesheet" type="text/css" href="/Style/jquery-ui-1.12.1/jquery-ui.css"/> 

<script> 
    $(document).ready(function() { 
     //Uncaught ReferenceError: $ is not defined 
    }); 
</script>

来源

2017-05-04 MRWonderFuXker

你必须听'onload'事件，然后执行你的脚本... – Rayon

附加一个'onload'事件到你已经创建的脚本标记来加载jquery，并且在onload的回调函数中执行'.ready'功能。 –

如果在检查脚本之后插入外部js文件字符串，它会被执行吗？ – MRWonderFuXker

var script = document.createElement("script"); 

script.src = '/Style/js/jquery-1.10.2.js'; 
document.getElementsByTagName('head')[0].appendChild(script); 
script.onload = function() { 
    alert("Script loaded and ready"); 
    fun(); 
}; 

function fun(){ 
    $(document).ready(function() { 
     alert("Try now Working Jquery Library"); 
    }); 
}

尝试插入而不是插入类脚本头标记。检查脚本将使用onload语句加载，并进一步尝试以下语句。

来源

2017-05-04 07:14:56

我已经试过这种方式。但是，在执行脚本之后，jquery被插入到html头部！ jQuery-UI将会得到'Uncaught ReferenceError：$ is not defined'错误，因为jQuery并没有在它的执行时间内完全加载。 – MRWonderFuXker

现在我做了updations来执行一个jquery库如何插入和加载..现在你不会得到“ReferenceError：$没有定义”... –

你的意思是应该加载jQuery-UI文件的乐趣（）由JS？ – MRWonderFuXker

如何动态插入js文件

回答

相关问题