如何在另一个Javascript文件中加载Javascript文件并在文件1之前执行文件2？

I have written a jQuery plugin, say jquery.plugin.js. I want to use this plugin on a large number of sites.

我写了一个jQuery插件，比如说jquery.plugin.js。我想在很多网站上使用这个插件。

What I want to do is to write a piece of js code at the top of jquery.plugin.js which will load the jquery.main.js and execute it so that $ is available to be used in jquery.plugin.js.

我想要做的是在jquery.plugin.js的顶部编写一段js代码，它将加载jquery.main.js并执行它，以便$可用于jquery.plugin.js。

Thanks.

谢谢。

5 个解决方案

#1

What you probably want to do is create a new tag in js

您可能想要做的是在js中创建一个新标签

script = document.createElement('script');
script.src = 'URL-TO-JQUERY';

And then append that element before the first tag.

然后在第一个标记之前附加该元素。

document.body.insertBefore(document.getElementsByTagName('script')[0], script);

This will most probably work as the script is inserted before any other js. (except in the head)

这很可能会在脚本插入任何其他js之前发挥作用。 （头部除外）

Yes, just a interval that checks if jQuery exists:

是的，只是检查jQuery是否存在的间隔：

interval = setInterval(check, 100);
function check(){
  if($.version){
    // Exec script
  }
}

#2

This page may be useful for you

此页面可能对您有用

http://code.google.com/p/jquery-ajaxq/

http://code.google.com/p/jquery-ajaxq/

with this script you can use files sequentially

使用此脚本，您可以按顺序使用文件

#3

Works only if jQuery is loaded already,

仅在已加载jQuery时才有效，

$.when($.getScript("path_to_script")).then(function() {

   alert("loaded");
})​

Fiddle - http://jsfiddle.net/fLuDd/

小提琴 - http://jsfiddle.net/fLuDd/

Edit

var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js')
document.getElementsByTagName("head")[0].appendChild(fileref)


var t = setInterval(function() {
    if (typeof(jQuery) == 'function') {
        alert("jquery loaded");
        clearInterval(t);
    }
}, 2000);​

Fiddle - http://jsfiddle.net/fLuDd/1/

小提琴 - http://jsfiddle.net/fLuDd/1/

#4

Just include the jquery.main.js above the jquery.plugin.js. It should work if you place the script tags in this order.

只需在jquery.plugin.js上面包含jquery.main.js即可。如果您按此顺序放置脚本标记，它应该可以工作。

<script src="jquery.main.js"></script>
<script src="jquery.plugin.js"></script>

If you do not have full control over the html or if jQuery might be loaded from other places also, do this to check if it is loaded or not, and load only if needed.

如果您无法完全控制html，或者jQuery也可能从其他地方加载，请执行此操作以检查是否已加载，并仅在需要时加载。

Load from google

从谷歌加载

if (typeof jQuery == 'undefined') {  
    document.write('<script type="text/javascript" src="http://www.google.com/jsapi"></script>');
    document.write('<script type="text/javascript">');
        google.load("jquery", "1.4.2");
    document.write('</script>');
}

Load from same server

从同一台服务器加载

if (typeof jQuery == 'undefined') {  
    document.write('<script type="text/javascript" src="path/to/jquery.min.js"></script>');
}

#5

There are some AMD packages that do what you want, like requirejs, but... you'll have to load them first!

有一些AMD软件包能够满足您的需求，例如requirejs，但是......您必须先加载它们！

You could use a polling technique (load jQuery dynamically and poll until $ exists), not very elegant or efficient.

您可以使用轮询技术（动态加载jQuery并轮询直到$存在），不是非常优雅或高效。

You could also attach an onload event handler to the dynamic jQuery script, which will trigger your plugin after loading jQuery. Of course such event handlers have cross-browser compatibility issues, so it's easier to write them... with jQuery.

您还可以将onload事件处理程序附加到动态jQuery脚本，这将在加载jQuery后触发您的插件。当然，这样的事件处理程序具有跨浏览器兼容性问题，因此使用jQuery编写它们更容易。

Bottom line: it's a lot of trouble and you're usually better off just writing two script tags.

一句话：这很麻烦，你通常最好只编写两个脚本标签。

P.S.: Some of the above techniques are explained in this article: http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/

P.S。：本文解释了上述一些技术：http：//www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/