我有一个动态网页，我需要在另一个javascript文件内导入一个外部JS文件(在IF条件下)。
我试图寻找一个可行的解决办法，但没有成功。
我尝试使用document.createElement()将JS文件加载到DOM，但它也不起作用。显然，Js被加载到DOM中，但在当前Js文件中无法访问。
解决方案在jQuery也将很好
当前回答
下面是一个动态加载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>
其他回答
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
});
你可以使用JQuery:
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); //data returned
console.log(textStatus); //success
console.log(jqxhr.status); //200
console.log('Load was performed.');
});
这个链接应该有助于: http://api.jquery.com/jQuery.getScript/
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>
你可以动态加载页面内的js，而不是另一个js文件。
你必须使用getScript来加载js文件。
$.getScript("ajax/test.js", function(data, textStatus, jqxhr) {
console.log(data); // data returned
console.log(textStatus); // success
console.log(jqxhr.status); // 200
console.log('Load was performed.');
});
