logo标签列表

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

javascriptjquery
3

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

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

谢谢。

2
也许可以看一下 requirejs：http://requirejs.org/docs/jquery.html - gherkins
为什么不在HTML中将jquery.main.js包含在插件之上呢？ - beatgammit
@tjameson 因为我将在大量网站上使用此插件，这些网站可能已经加载了主要的jquery js文件，也可能没有。我只想测试一下，如果jquery未定义，则加载它并执行它，以便$可以在jquery插件中使用。 - user441407
也许是因为他没有完全访问HTML的权限？ - Joseph Adams
5个回答
1

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

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

然后在第一个标签之前添加该元素。
document.body.insertBefore(document.getElementsByTagName('script')[0], script);

这很可能会起作用，因为脚本是在任何其他js之前插入的。（除了头部）

是的，只需一个间隔来检查jQuery是否存在：

interval = setInterval(check, 100);
function check(){
  if($.version){
    // Exec script
  }
}
这里需要注意一些细节，因为当前上下文不会被中断以加载/执行新脚本。必须使用setTimeout或其他异步请求。他可能需要使用setInterval(function () { if ($) doPlugin(); })或类似的东西。 - beatgammit
1
0

只需将jquery.main.js放在jquery.plugin.js之前即可。如果您按照这个顺序放置脚本标签，它应该可以正常工作。

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

如果你没有完全控制HTML或者可能同时从其他地方加载jQuery，那么请执行以下操作来检查它是否已经被加载，仅在需要时加载。
从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>');
}

从同一服务器加载

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

只有在已经加载了jQuery的情况下才能工作。

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

   alert("loaded");
})​

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

编辑

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/

0

有一些 AMD 包可以做到你想要的，比如 requirejs，但是... 你必须先加载它们！

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

你也可以将 onload 事件处理程序附加到动态 jQuery 脚本上，在加载 jQuery 后触发插件。当然，这样的事件处理程序存在跨浏览器兼容性问题，所以最好使用 jQuery 编写它们。

底线：这很麻烦，通常最好只编写两个脚本标记。

P.S.：以上某些技术在这篇文章中有解释： http://www.stevesouders.com/blog/2008/12/27/coupling-async-scripts/

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接