logo标签列表

在同一页面中使用JQuery和Prototype

javascriptjqueryprototypejs
35

我的几个页面同时使用了JQuery和Prototype。自从我升级到JQuery的1.3版本后，出现了问题，因为这两个库都定义了一个名为“$”的函数。

JQuery提供了一个名为noConflict()的函数，可以将对$的控制权交给可能正在使用它的其他库。因此，我似乎需要检查所有类似于下面这样的页面:

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
</head>

并将它们更改为以下样式：

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        jQuery.noConflict();
        var $j = jQuery;
    </script>
</head>

我应该能够在Prototype中使用“$”，在JQuery中使用“$j”（或“jQuery”）。但我不太满意在每个相关页面中重复这两行代码，并且预计某个时候有人很可能会忘记将它们添加到新页面中。我希望能够执行以下操作：

  • 创建文件jquery-noconflict.js，其中“包含”jquery.js和上面显示的2行代码
  • 在所有我的JSP / HTML页面中导入jquery-noconflict.js（而不是jquery.js）

但是，我不确定是否可以以我描述的方式在一个JS文件中包含另一个JS文件？当然，另一种解决方案是直接在jquery.js中添加上述2行代码，但如果我这样做，每次升级JQuery时都需要记得这样做。

我提供的答案对您有用吗？ - PrimosK
1
不知道，自从我问这个问题已经过去3年了... - Dónal
好的.. :) 我错过了那个.. :) 但是我认为原理是正确的，因为我试过了... - PrimosK
1
显然这是旧的，但我遇到了一个情况，需要在63个HTML文件中更改5行代码（我没有建立这个网站）。一些正则表达式替换和文件替换在几秒钟内完成了任务。Notepad++可以做到有限的程度，而Sublime文本编辑器则像冠军一样完成了任务。 - David Hobs
@DavidHobs：Sublime加一！它是自切片面包以来的最佳事物！ - ClarkeyBoy
12个回答
19

目前您可以像这样做：

<head>          
    <script type="text/javascript" src="/obp/js/prototype.js"></script>
    <script type="text/javascript" src="/obp/js/jquery.js"></script>
    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>
</head>

然后，使用jQuery时要写成$j()，使用Prototype时要写成$()。

这对我解决类似问题非常有帮助。谢谢jmonteiro :) - michaelmcgurk
5

看起来最简单的答案是使用noConflict代码，当然，如果你的网页没有使用共享头文件，这个解决方案可能不是最好的。

5
这个解决方案很好：
jQuery.noConflict();
var $j = jQuery;

现在使用$j代替$来编写jQuery代码，例如：

$j(document).ready(function() {
    $j('#div_id').innerfade({
         // some stuff
    });
});
3

我曾经遇到过这个问题。这很烦人，最后我决定把所有旧的原型 stuff 清除掉，换成 jQuery。虽然我喜欢原型处理某些 Ajax 任务的方式，但维护所有 no conflict 的东西并不值得。

+1 减少使用的框架总是一个好主意。不仅在冲突方面，而且在轻量级应用程序方面也是如此，即使需要一些重构来消除原型。 - acme
2
2

你为什么不能在jquery.js源文件中包含jQuery = noConflict()代码？为什么需要这样定义？

1
你可以先调用jQuery然后设置。
var $j = jQuery;

原型将在这种情况下控制$。

或者，您可以通过使用完整的jQuery函数名称（jQuery）来引用jQuery。

1
<script>
    document.write(unescape('%3Cscript type="text/javascript" src="/obp/js/jquery.js"%3E%3C/script%3E'));
</script>
<script>
    jQuery.noConflict();
    var $j = jQuery;
</script>

或者

var scripty = document.createElement('script');
scripty.href="/obp/js/jquery.js";
document.getElementsByTagName('head')[0].appendChild(scripty);
jQuery.noConflict();
var $j = jQuery;

编辑：

我尝试了这个建议，但是最后两行出现错误。

jQuery is not defined
3
当脚本加载时，您需要指定一个回调函数来运行noconflict代码...只需使用.appendChild(scripty)。scripty.onload = setNoconflict; function setNoconflict(){ jQuery.noConflict(); $j = jQuery; } - CodeJoust
1
@jacobangel，你的第一个例子是可以工作的，但我去掉了一个错别字（请参见差异），并进行了更正：在document.write（..）之后关闭脚本标记并打开一个新的标记，在其中包含jQuery.noConflict()是很重要的。否则，由于document.write将jQuery脚本附加到当前脚本块之后，因此jQuery未定义。 - acme
1

你的 jquery-noconflict.js 应该长这样（确保所有内容在一行）：

document.write("<script type=\"text/javascript\" src=\"/obp/js/jquery.js\"></script><script type=\"text/javascript\">jQuery.noConflict();var $j = jQuery;</script>");

...然后你的包含（正如你已经指出的那样）应该是这样的：

<head>      
    <script type="text/javascript" src="/obp/js/prototype.js"></script>    
    <script type="text/javascript" src="/obp/js/jquery-noconflict.js"></script>
</head>

我认为这个解决方案能够满足您的所有需求。

0
你需要在你的 public/javascript/application.js 中载入它。
jQuery.noConflict();

var $j = jQuery;

这也是一篇非常不错的文章，可能会对您有所帮助。

JQuery & Prototype working together

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