我有一个动态网页,我需要在另一个javascript文件内导入一个外部JS文件(在IF条件下)。
我试图寻找一个可行的解决办法,但没有成功。
我尝试使用document.createElement()将JS文件加载到DOM,但它也不起作用。显然,Js被加载到DOM中,但在当前Js文件中无法访问。
解决方案在jQuery也将很好
我有一个动态网页,我需要在另一个javascript文件内导入一个外部JS文件(在IF条件下)。
我试图寻找一个可行的解决办法,但没有成功。
我尝试使用document.createElement()将JS文件加载到DOM,但它也不起作用。显然,Js被加载到DOM中,但在当前Js文件中无法访问。
解决方案在jQuery也将很好
当前回答
我猜在你的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
其他回答
jQuery有$.getScript():
描述:使用GET HTTP请求从服务器加载一个JavaScript文件,然后执行它。
你可以动态加载页面内的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.');
});
为了编写我的插件,我需要在JS文件中加载外部脚本和样式,所有这些都是预定义的。为了实现这一目标,我做了以下事情:
this.loadRequiredFiles = function (callback) {
var scripts = ['xx.js', 'yy.js'];
var styles = ['zz.css'];
var filesloaded = 0;
var filestoload = scripts.length + styles.length;
for (var i = 0; i < scripts.length; i++) {
log('Loading script ' + scripts[i]);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = scripts[i];
script.onload = function () {
log('Loaded script');
log(this);
filesloaded++; // (This means increment, i.e. add one)
finishLoad();
};
document.head.appendChild(script);
}
for (var i = 0; i < styles.length; i++) {
log('Loading style ' + styles[i]);
var style = document.createElement('link');
style.rel = 'stylesheet';
style.href = styles[i];
style.type = 'text/css';
style.onload = function () {
log('Loaded style');
log(this);
filesloaded++;
finishLoad();
};
document.head.appendChild(style);
}
function finishLoad() {
if (filesloaded === filestoload) {
callback();
}
}
};
更多上下文中的脚本:
function myPlugin() {
var opts = {
verbose: false
}; ///< The options required to run this function
var self = this; ///< An alias to 'this' in case we're in jQuery ///< Constants required for this function to work
this.getOptions = function() {
return opts;
};
this.setOptions = function(options) {
for (var x in options) {
opts[x] = options[x];
}
};
/**
* @brief Load the required files for this plugin
* @param {Function} callback A callback function to run when all files have been loaded
*/
this.loadRequiredFiles = function (callback) {
var scripts = ['xx.js', 'yy.js'];
var styles = ['zz.css'];
var filesloaded = 0;
var filestoload = scripts.length + styles.length;
for (var i = 0; i < scripts.length; i++) {
log('Loading script ' + scripts[i]);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = scripts[i];
script.onload = function () {
log('Loaded script');
log(this);
filesloaded++;
finishLoad();
};
document.head.appendChild(script);
}
for (var i = 0; i < styles.length; i++) {
log('Loading style ' + styles[i]);
var style = document.createElement('link');
style.rel = 'stylesheet';
style.href = styles[i];
style.type = 'text/css';
style.onload = function () {
log('Loaded style');
log(this);
filesloaded++;
finishLoad();
};
document.head.appendChild(style);
}
function finishLoad() {
if (filesloaded === filestoload) {
callback();
}
}
};
/**
* @brief Enable user-controlled logging within this function
* @param {String} msg The message to log
* @param {Boolean} force True to log message even if user has set logging to false
*/
function log(msg, force) {
if (opts.verbose || force) {
console.log(msg);
}
}
/**
* @brief Initialise this function
*/
this.init = function() {
self.loadRequiredFiles(self.afterLoadRequiredFiles);
};
this.afterLoadRequiredFiles = function () {
// Do stuff
};
}
你可以使用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/
我建议使用AMD javascript类文件requirejs
这是一个很好的例子
http://www.sitepoint.com/understanding-requirejs-for-effective-javascript-module-loading/