我有一个动态网页，我需要在另一个javascript文件内导入一个外部JS文件(在IF条件下)。
我试图寻找一个可行的解决办法，但没有成功。
我尝试使用document.createElement()将JS文件加载到DOM，但它也不起作用。显然，Js被加载到DOM中，但在当前Js文件中无法访问。
解决方案在jQuery也将很好
当前回答
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文档
其他回答
jQuery有$.getScript():
描述:使用GET HTTP请求从服务器加载一个JavaScript文件，然后执行它。
我建议使用AMD javascript类文件requirejs
这是一个很好的例子
http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/
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
});
我猜在你的dom解决方案中，你做了如下的事情:
var script = document.createElement('script');
script.src = something;
//do stuff with the script
首先，这是行不通的，因为脚本没有被添加到文档树中，所以它不会被加载。而且，即使你这样做了，当另一个脚本正在加载时，javascript的执行仍在继续，所以它的内容在脚本完全加载之前是不可用的。
您可以侦听脚本的load事件，并按照您的意愿对结果进行处理。所以:
var script = document.createElement('script');
script.onload = function () {
//do stuff with the script
};
script.src = something;
document.head.appendChild(script); //or something of the likes
下面是一个动态加载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>
