Javascript 使用异步加载的外部脚本中的jQuery插件
我有一个非常基本的jQuery插件,我将其加载到我的网页中,如下所示:Javascript 使用异步加载的外部脚本中的jQuery插件,javascript,jquery,asynchronous,jquery-plugins,Javascript,Jquery,Asynchronous,Jquery Plugins,我有一个非常基本的jQuery插件,我将其加载到我的网页中,如下所示: (function() { var tk = document.createElement('script'); tk.src = '//www.test.com/scripts/jq_plugin.js'; tk.type = 'text/javascript'; tk.async = 'true'; tk.onload = tk.onreadystatechange = funct
(function() {
var tk = document.createElement('script');
tk.src = '//www.test.com/scripts/jq_plugin.js';
tk.type = 'text/javascript';
tk.async = 'true';
tk.onload = tk.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded') return;
};
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(tk, s);
})();
然后,我这样调用插件:
$(function(){
$('#test').jq_plugin();
});
但当页面加载时,我会出现以下错误:
Uncaught TypeError: undefined is not a function
(anonymous function)
我理解为什么-在加载脚本之前调用插件。我知道一个快速而肮脏的黑客只是在插件调用周围使用setTimeout()
,但我不想这样做。我尝试在jQuery前后插入脚本,但得到了相同的结果
我如何在没有超时的情况下执行此操作
这是插件的精简版本:
(function ( $ ) {
$.fn.jq_plugin = function(options){
return this.each(function() {
return $(this).click(onClick);
function onClick(e){
console.log('ID: '+$(this).attr('id'));
}
});
};
}( jQuery ));
您创建了一个onload/onreadystatechange,但它所做的只是返回。在你尝试调用插件之前,你需要检查一下 您可以将使用插件的代码放入onload函数中
tk.onload = tk.onreadystatechange = function() {
var rs = this.readyState;
if (rs && rs != 'complete' && rs != 'loaded'){
$(function(){
$('#test').jq_plugin();
});
}
};
当然,您可以设置布尔值
tkHasLoaded=false
,然后在onload函数中将其设置为true。在尝试使用插件之前,请检查此项。在onreadystatechange
处理程序函数中调用插件。我真的不想这样做。加载脚本的代码段供用户下载并添加到其站点。该插件充当各种API。也可能有大量元素调用插件,这就是异步加载的本质。依赖于它的任何事情都必须在回调中完成。他们为什么不在HTML中添加
标记呢?或者您应该看看RequireJS是如何工作的。我之所以避免使用
标记,是因为我不希望脚本影响它添加到的任何页面的加载时间。将研究RequireJS,谢谢。该标志不会有帮助,因为无法返回并再次检查它。此外,奇怪的是,它阻止我得到错误,但插件变得没有响应。无论如何,谢谢。@Barmar只需将标志设为全局变量。这没有帮助。您不能在循环中检查它,因为当循环运行时,它会阻止脚本的异步加载。