2017-05-04 119 views
0

我想加载一些更加动态的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> 
+0

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

+0

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

+0

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

回答

0
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语句加载,并进一步尝试以下语句。

+0

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

+0

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

+0

你的意思是应该加载jQuery-UI文件的乐趣()由JS? – MRWonderFuXker