奇怪的Chrome原型/ jQuery冲突 [英] Weird Chrome prototype/jQuery conflict

问题描述

我们有一个依赖原型的遗留代码的应用程序，但是我们发现它对于我们想要使用它的大多数地方来说太沉重了，并且发现jQuery更适合我们工作。因此，我们正在向jQuery迁移新功能。

与此同时，我们有几个页面需要加载这两个库：

 < script language =javascripttype =text / javascript
 src =prototype-1.5.1.2.js>< / script> ; 
< script language =javascripttype =text / javascript
 src =jquery-1.3.2.js>< / script> 
< script language =javascripttype =text / javascript> 
 $ j = jQuery.noConflict（）; 
< / script> 
  

（注意旧版本的原型，我们在升级时发现了一些问题，我们不想在我们正在逐步淘汰它）

这适用于IE6，IE7，IE8-as-7和FX3，但在Chrome中加载并且所有jQuery内容都失败。

加载开发人员javascript控制台会显示以下错误：

 未捕获错误：NOT_SUPPORTED_ERR：DOM异常9 http：//.../prototype-1.5.1.2.js（第1272行）
 Uncaught TypeError：Object＃< an Object>没有方法'ready'http：//.../lib.js（第161行）
未捕获TypeError：Object＃< an Object>没有方法'slideUp'http：//.../page.aspx（第173行）
 ...等等 - 所有失败都缺少jQuery方法
  

所以这看起来像原型中的一个冲突，导致创建jQuery对象失败。

特定的原型问题似乎是Prototype.BrowserFeatures.XPath，因为它不应该是true，因为XPath document.evaluate不受支持。

好的，现在使用javascript控制台重新加载页面 - 它一切正常！！WTF？关闭控制台，重新加载并再次失败。

只有在未打开javascript控制台的情况下发生页面加载时才会发生故障 - 为什么会有所不同？这看起来非常像Chrome中的一个bug。

任何人都能解释发生了什么问题吗？为什么原型中的错误会导致jQuery init失败？为什么在打开控制台的情况下加载页面使其工作？

任何人都知道一个很好的解决方法？ （除了升级到prototype-1.6.0.3.js，它解决了这个问题，但是破坏了其他地方的遗留代码负载）。 解决方案

从 Core / jQuery.noConflict ：

注意：必须在包含jQuery javascript文件之后调用此函数，但是 BEFORE 包括任何其他冲突库，并且在实际使用其他冲突库之前，如果最后包含jQuery。可以在jQuery.js文件末尾调用noConflict来全局禁用$（）jQuery别名。 jQuery.noConflict返回对jQuery的引用，所以它可以用来覆盖jQuery对象的$（）别名。

也许尝试将其更改为：

 < script language =javascripttype =text / javascript
 src = jQuery的1.3.2.js >< /脚本> 
< script language =javascripttype =text / javascript> 
 $ j = jQuery.noConflict（）; 
< / script> 
< script language =javascripttype =text / javascript
 src =prototype-1.5.1.2.js>< / script> 
  

We have an application with legacy code that relies on prototype, but we've found it to be too 'heavy' for most of the places we want to use it and and have found jQuery to be a better fit for how we work. So we're migrating to jQuery for new functionality.

In the meantime we have several pages that need to load both libraries:

<script language="javascript" type="text/javascript"
        src="prototype-1.5.1.2.js"></script> 
<script language="javascript" type="text/javascript"  
        src="jquery-1.3.2.js"></script> 
<script language="javascript" type="text/javascript">
    $j = jQuery.noConflict();
</script> 

(note older version of prototype, we found issues on upgrading that we don't want to fix when we're phasing it out anyhow)

This works in IE6, IE7, IE8-as-7 and FX3, but load it in Chrome and all the jQuery stuff fails.

Loading up the developer javascript console displays the following errors:

Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9 http://.../prototype-1.5.1.2.js (line 1272)
Uncaught TypeError: Object #<an Object> has no method 'ready' http://.../lib.js (line 161)
Uncaught TypeError: Object #<an Object> has no method 'slideUp' http://.../page.aspx (line 173)
... and so on - all the failures are missing jQuery methods

So this looks like a conflict in prototype that causes the creation of the jQuery object to fail.

The specific prototype issue appears to be Prototype.BrowserFeatures.XPath being true when it shouldn't be, as XPath document.evaluate isn't supported.

Ok, so now reload the page with the javascript console open - it all works! WTF? Close the console, reload and it fails again.

The failure only occurs when the page load occurs without the javascript console open - why would that make any difference? That looks very much like a bug in Chrome.

Anyone able to explain what's going wrong? Why should an error in prototype cause the jQuery init to fail? Why does loading the page with the console open make it work?

Anyone know a good workaround? (apart from upgrading to prototype-1.6.0.3.js, which fixes this issue but breaks a load of legacy code elsewhere)

解决方案

From Core/jQuery.noConflict:

NOTE: This function must be called after including the jQuery javascript file, but BEFORE including any other conflicting library, and also before actually that other conflicting library gets used, in case jQuery is included last. noConflict can be called at the end of the jQuery.js file to globally disable the $() jQuery alias. jQuery.noConflict returns a reference to jQuery, so it can be used to override the $() alias of the jQuery object.

Maybe try changing it to:

<script language="javascript" type="text/javascript"
  src="jquery-1.3.2.js"></script> 
<script language="javascript" type="text/javascript">
    $j = jQuery.noConflict();
</script>
<script language="javascript" type="text/javascript"
  src="prototype-1.5.1.2.js"></script>

这篇关于奇怪的Chrome原型/ jQuery冲突的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！