我有一个动态网页，我需要在另一个javascript文件内导入一个外部JS文件(在IF条件下)。
我试图寻找一个可行的解决办法，但没有成功。
我尝试使用document.createElement()将JS文件加载到DOM，但它也不起作用。显然，Js被加载到DOM中，但在当前Js文件中无法访问。
解决方案在jQuery也将很好
当前回答
jQuery有$.getScript():
描述:使用GET HTTP请求从服务器加载一个JavaScript文件，然后执行它。
其他回答
jQuery的$.getScript()有时是bug，所以我使用我自己的实现，如:
jQuery.loadScript = function (url, callback) {
jQuery.ajax({
url: url,
dataType: 'script',
success: callback,
async: true
});
}
像这样使用它:
if (typeof someObject == 'undefined') $.loadScript('url_to_someScript.js', function(){
//Stuff to do after someScript has loaded
});
我需要经常这样做，所以我使用这个:
var loadJS = function(url, implementationCode, location){
//url is URL of external file, implementationCode is the code
//to be called from the file, location is the location to
//insert the <script> element
var scriptTag = document.createElement('script');
scriptTag.src = url;
scriptTag.onload = implementationCode;
scriptTag.onreadystatechange = implementationCode;
location.appendChild(scriptTag);
};
var yourCodeToBeCalled = function(){
//your code goes here
}
loadJS('yourcode.js', yourCodeToBeCalled, document.body);
有关更多信息，请参阅本网站如何在另一个JavaScript文件中包含一个JavaScript文件?，这是我的函数思想的来源。
如果你有很多依赖文件，使用AMD/RequireJS。 http://requirejs.org/
jQuery.getScript()方法是Ajax函数的简写(带有dataType属性:$。ajax({url: url,dataType: "script"}))
如果您希望脚本是可缓存的，可以使用RequireJS或遵循jQuery扩展jQuery的示例。getScript方法类似如下。
jQuery.cachedScript = function( url, options ) {
// Allow user to set any option except for dataType, cache, and url
options = $.extend( options || {}, {
dataType: "script",
cache: true,
url: url
});
// Use $.ajax() since it is more flexible than $.getScript
// Return the jqXHR object so we can chain callbacks
return jQuery.ajax( options );
};
// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
console.log( textStatus );
});
参考:jQuery. getscript () | jQuery API文档
下面是一个动态加载javascript和CSS文件的小库:
https://github.com/todotresde/javascript-loader
我想按顺序和动态加载css和js文件是有用的。
支持扩展来加载任何你想要的库，而不仅仅是主文件，你可以用它来加载自定义文件。
例如:
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="scripts/javascript-loader.js" type="text/javascript" charset="utf-8" ></script>
<script type="text/javascript">
$(function() {
registerLib("threejs", test);
function test(){
console.log(THREE);
}
registerLib("tinymce", draw);
function draw(){
tinymce.init({selector:'textarea'});
}
});
</script>
</head>
<body>
<textarea>Your content here.</textarea>
</body>
