动态googlejavascripts加载失败
我有几个关于情态动词的听众,看起来像这样:动态googlejavascripts加载失败,javascript,performance,dynamic,google-visualization,Javascript,Performance,Dynamic,Google Visualization,我有几个关于情态动词的听众,看起来像这样: $('#modaledithistory').on('shown.bs.modal', function() { loadjscssfile("js/editable_table.js", "js", function(){ setHistory(true); }); }); 正在调用的函数是: function loadjscssfile(filename, filetype, callback){
$('#modaledithistory').on('shown.bs.modal', function() {
loadjscssfile("js/editable_table.js", "js", function(){ setHistory(true); });
});
正在调用的函数是:
function loadjscssfile(filename, filetype, callback){
if (filesadded.indexOf("["+filename+"]")==-1){
if (filetype=="js"){
var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", filename);
fileref.onreadystatechange = callback;
fileref.onload = callback;
}
if (typeof fileref!="undefined"){
// Fire the loading
document.getElementsByTagName("head")[0].appendChild(fileref);
console.log("added to html: " + filename);
}
filesadded+="["+filename+"]";
} else {
window[callback]();
console.log("already loaded: " + filename);
}
console.log(callback);
}
这工作得很好,正如预期的那样此侦听器出现问题:
$('#modalreporting').on('shown.bs.modal', function() {
loadjscssfile("https://www.gstatic.com/charts/loader.js", "js", null);
loadjscssfile("js/graphs.js", "js", function(){ initGraphs(); drawGraphs(); mobileRotateScreen(true);
} );
考虑到带有回调的代码实际上表示要等到文件完全加载后再执行代码,我由此得到的控制台错误没有任何意义。错误: 生成错误的行:
// line 20
google.charts.load('current', {
packages: ['corechart']
});
// line 313
var data = new google.visualization.DataTable(),
max = 0;
因此,控制台的意思是,对象“google”不存在。但是,应该加载该文件。我浏览了一下,里面甚至没有创建一个google对象。 当将脚本元素直接放在html中时,它可以工作,但出于性能原因,我不希望这样做 谁能帮我弄明白这一点吗?
谢谢 编辑:
我注意到
窗口[回调]()代码>也不能正常工作。
在执行这一行时,我得到javascript.js:1011 Uncaught TypeError:window[callback]不是一个函数
首先,尝试等待GoogleCharts脚本加载,然后再加载下一个脚本
$('#modalreporting').on('shown.bs.modal', function() {
loadjscssfile("https://www.gstatic.com/charts/loader.js", "js", function () {
loadjscssfile("js/graphs.js", "js", function() {
initGraphs();
drawGraphs();
mobileRotateScreen(true);
});
});
});
接下来,您需要等待google的load
语句完成,
在使用google.visualization
命名空间之前
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = new google.visualization.DataTable(),
max = 0;
...
});
免责声明:为了能够作出长评论和添加格式,我需要发布一个答案
我对它做了一些修改,因为加载JS文件后的3个函数实际上调用了datatable等,并且需要重新执行(因此在loadjscssfile中window[callback]();
)
graphs.js
function initGoogleLibraries(googleLib) {
if (filesadded.indexOf("["+googleLib+"]")==-1){
google.charts.load('current', {
packages: ['corechart','gauge']
}).then(function () {
filesadded+="["+googleLib+"]";
console.log("loaded google Lib");
});
} else {
return;
}
}
然后是问题。
Uncaught TypeError: Cannot read property 'then' of undefined at HTMLScriptElement.onreadystatechange
基本上,其背后的逻辑应该是:
点击模态
加载JS文件
加载JS时,加载google的“corechart”和“gauge”库
加载库时,执行initGraphs()、drawGraphs()和mobileRotateScreen(true)
当关闭modal并再次单击时,只应再次执行initGraphs()、drawGraphs()和mobileRotateScreen(true)(因为重新加载js的性能将比以前更低)
希望这有帮助,对于window[callback]
——你在哪里设置回调?-->window[callback]=someCallback;
window[callback]();
应该是callback();
。不知道为什么我甚至尝试了一些我不懂的东西:p
function initGoogleLibraries(googleLib) {
if (filesadded.indexOf("["+googleLib+"]")==-1){
google.charts.load('current', {
packages: ['corechart','gauge']
}).then(function () {
filesadded+="["+googleLib+"]";
console.log("loaded google Lib");
});
} else {
return;
}
}
Uncaught TypeError: Cannot read property 'then' of undefined at HTMLScriptElement.onreadystatechange