如果尚未加载脚本,则加载脚本,然后使用它们
Load scripts if not already loaded, and then use them
我有 4 个 javascript 库,如果尚未加载,我想加载它们。然后,我想使用它们的功能。
我的问题是我得到 Uncaught ReferenceError: sbjs is not defined
,脚本已加载但我无法实际使用它们。
如果尚未加载脚本,我可以完美地将其添加到 </body>
标记上方,但我似乎无法让它们工作。
这是我的代码:
<script>
window.onload = myapp_scripts;
function myapp_scripts () {
var myapp_script;
if (!window.jQuery) {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/jquery.min.js';
console.log('load jquery');
}
if (!window.Cookies) {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/cookie.min.js';
console.log('load cookies');
}
if (typeof url == 'undefined') {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/url.min.js';
console.log('load url');
}
if (typeof sbjs == 'undefined') {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/sourcebuster.min.js';
console.log('load sbjs');
}
myapp_init();
}
function myapp_init () {
sbjs.init();
console.log(Cookies.get('source_id'));
console.log(url('source_id'));
console.log(sbjs.get.current);
$('#myapp_form').submit(function (event) {
event.preventDefault();
console.log('form submitted');
});
}
</script>
如何实现才能使用动态加载的脚本?
我认为你的问题是因为 myapp_init() 是在加载脚本之前执行的
您需要管理脚本加载事件和调用后 myapp_init()
每个 if() 条件中都有这样的内容:
var myapp_script;
var scripts_loaded = 0;
if (!window.jQuery) {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/jquery.min.js';
console.log('load jquery');
myapp_script.onload = function(){
scripts_loaded ++;
if(scripts_loaded === 4){ //4 because in your example you have 4 scripts to load
myapp_init();
}
}
}else{
scripts_loaded ++;
}
//...
//And so on with others if conditions
这不是一个优雅的解决方案,但只是一个想法:以某种方式检查是否所有脚本都已加载,然后调用 myapp_init();
我有 4 个 javascript 库,如果尚未加载,我想加载它们。然后,我想使用它们的功能。
我的问题是我得到 Uncaught ReferenceError: sbjs is not defined
,脚本已加载但我无法实际使用它们。
如果尚未加载脚本,我可以完美地将其添加到 </body>
标记上方,但我似乎无法让它们工作。
这是我的代码:
<script>
window.onload = myapp_scripts;
function myapp_scripts () {
var myapp_script;
if (!window.jQuery) {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/jquery.min.js';
console.log('load jquery');
}
if (!window.Cookies) {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/cookie.min.js';
console.log('load cookies');
}
if (typeof url == 'undefined') {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/url.min.js';
console.log('load url');
}
if (typeof sbjs == 'undefined') {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/sourcebuster.min.js';
console.log('load sbjs');
}
myapp_init();
}
function myapp_init () {
sbjs.init();
console.log(Cookies.get('source_id'));
console.log(url('source_id'));
console.log(sbjs.get.current);
$('#myapp_form').submit(function (event) {
event.preventDefault();
console.log('form submitted');
});
}
</script>
如何实现才能使用动态加载的脚本?
我认为你的问题是因为 myapp_init() 是在加载脚本之前执行的 您需要管理脚本加载事件和调用后 myapp_init()
每个 if() 条件中都有这样的内容:
var myapp_script;
var scripts_loaded = 0;
if (!window.jQuery) {
myapp_script = document.createElement('script');
document.body.appendChild(myapp_script);
myapp_script.src = 'http://myapp.dev/js/jquery.min.js';
console.log('load jquery');
myapp_script.onload = function(){
scripts_loaded ++;
if(scripts_loaded === 4){ //4 because in your example you have 4 scripts to load
myapp_init();
}
}
}else{
scripts_loaded ++;
}
//...
//And so on with others if conditions
这不是一个优雅的解决方案,但只是一个想法:以某种方式检查是否所有脚本都已加载,然后调用 myapp_init();