在js中加载jQuery,然后执行依赖于它的脚本 [英] Load jQuery in a js, then execute a script that depends on it
问题描述
我有一个独特的问题 -
I have a unique issue -
我正在设计一个创建小部件的Web应用程序,然后用户可以将这些小部件嵌入到他们自己的页面中(主要是博客文章)。我希望他们只需要嵌入一行,所以我只是将该行作为include语句,从我的服务器上取下Javascript。
I am designing a web application that creates widgets that a user can then embed in their own page (blog posts, mostly). I want them to just have to embed one line, so I just had that line be an include statement, to pull a Javascript off my server.
问题是,我正在使用jQuery构建窗口小部件代码,我需要加载jQuery插件,因为我显然不知道我的用户是否会有它。我认为'这应该很简单'....
The problem is, I am building the widget code using jQuery, and I need to load the jQuery plugin, since I obviously don't know whether or not my users will have it available. I thought 'this should be pretty simple'....
function includeJavaScript(jsFile) {
var script = document.createElement('script');
script.src = jsFile;
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);
}
includeJavaScript('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
jQuery();
所以,我将jQuery文件附加到头部,然后尝试运行jQuery函数。麻烦的是,这不起作用!每次运行它时,我都会收到错误,即未定义变量jQuery。我尝试了一些事情。我尝试将jQuery函数放在onLoad触发器中,以便整个页面(包括,可能是jQuery文件)在调用我的脚本之前加载。我尝试将jQuery函数放在一个单独的文件中,并在加载jQuery lib文件后加载它。但我明白我错过了一些简单的东西 - 我是jQuery的新手,所以如果我遗漏了一些明显的东西,我道歉......
So, I am appending the jQuery file to the head, then afterwards, trying to run a jQuery function. Trouble is, this doesn't work! Everytime I run it, I get the error that variable jQuery is not defined. I have tried a few things. I tried putting the jQuery functions in an onLoad trigger, so that the whole page (including, presumably, the jQuery file) would load before it called my script. I tried putting the jQuery function in a seperate file, and loading it after loading the jQuery lib file. But I get the idea I'm missing something simple - I'm new to jQuery, so if I'm missing something obvious, I apologize...
EDIT
好的,我尝试了digitalFresh提供的建议,如下(使用Safari 5,如果有帮助),但我仍然得到同样的错误?
OK,I tried the suggestion offered by digitalFresh, as follows (using Safari 5, if that helps), but I still get the same error?
function test() {
jQuery()
}
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
script.onload = test(); //execute
document.body.appendChild(script);
编辑
好的,我最后得到了它可以在Brendan的一个随意的建议下工作,将ITSELF调用一个'onload'处理程序,如下所示:
OK, I FINALLY got it to work, in an offhand suggestion from Brendan, by putting the call ITSELF in an 'onload' handler, like so:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent( function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js';
document.body.appendChild(script);
jQuery();
});
此时,正如你所看到的,我甚至不需要把它放进' onload' - 它只是有效。虽然我不得不承认,我仍然不明白为什么它有效,这让我感到困扰...
At this point, as you can see, I don't even have to put it in an 'onload' - it just works. Though I have to admit, I still don't understand WHY it works, which bothers me...
推荐答案
你应该先检查以确保他们还没有使用jquery,例如:
You should first check to make sure they do not already use jquery so something like:
if (jQuery) {
// jQuery is loaded
} else {
// jQuery is not loaded
}
其次,你应该确保在没有冲突模式中使用jQuery而不是使用$运算符,因为它可能被另一个脚本库声明。
Secondly, you should make sure you use jQuery in no conflict mode and do not use the $ operator as it may be claimed by another script library.
然后嵌入,声明这个函数:
Then to embed, declare this function:
function load_script (url)
{
var xmlhttp;
try {
// Mozilla / Safari / IE7
xmlhttp = new XMLHttpRequest();
} catch (e) {
//Other IE
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
xmlhttp.open('GET', url, false); x.send('');
eval(xmlhttp.responseText);
var s = xmlhttp.responseText.split(/\n/);
var r = /^function\s*([a-z_]+)/i;
for (var i = 0; i < s.length; i++)
{
var m = r.exec(s[i]);
if (m != null)
window[m[1]] = eval(m[1]);
}
}
然后调用它:
load_script('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');
希望这有帮助。
这篇关于在js中加载jQuery,然后执行依赖于它的脚本的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!