Bizarre conflit prototype / jQuery Chrome

Question

Nous avons une application avec code hérité qui repose sur un prototype, mais nous l’avons trouvée trop lourde pour la plupart des endroits où nous souhaitons l’utiliser et jQuery convient mieux à notre travail. Nous passons donc vers jQuery pour de nouvelles fonctionnalités.

En attendant, plusieurs pages doivent charger les deux bibliothèques:

<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> 

(notez l'ancienne version du prototype, nous avons rencontré des problèmes de mise à niveau que nous ne souhaitons pas résoudre lorsque nous les supprimons de toute façon)

Cela fonctionne dans IE6, IE7, IE8-as-7 et FX3, mais chargez-le dans Chrome et toutes les commandes jQuery échouent.

Le chargement de la console JavaScript du développeur affiche les erreurs suivantes:

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

Cela ressemble donc à un conflit de prototype qui entraîne l'échec de la création de l'objet jQuery.

Le problème de prototype spécifique semble être que Prototype.BrowserFeatures.XPath est vrai alors qu'il ne devrait pas l'être, car XPath document.evaluate n'est pas pris en charge.

Bien, maintenant rechargez la page avec la console javascript ouverte - tout fonctionne! WTF? Fermez la console, rechargez et cela échoue à nouveau.

L'échec ne se produit que lorsque le chargement de la page a lieu sans la console javascript ouverte. Pourquoi cela ferait-il une différence? Cela ressemble beaucoup à un bug dans Chrome.

Quelqu'un peut-il expliquer ce qui ne va pas? Pourquoi une erreur dans un prototype entraîne-t-elle l'échec de l'init jQuery? Pourquoi le chargement de la page avec la console ouverte le fait-il fonctionner?

Quelqu'un connaît-il une bonne solution de contournement? (à part la mise à niveau vers le prototype-1.6.0.3.js, qui résout ce problème mais rompt une charge de code hérité ailleurs)

Answer 1

De Core / jQuery.noConflict :

  

REMARQUE: Cette fonction doit être appelée après avoir inclus le fichier javascript jQuery, mais AVANT avec toute autre bibliothèque en conflit, mais également avant que cette autre bibliothèque en conflit ne soit utilisée, au cas où jQuery serait inclus en dernier. noConflict peut être appelé à la fin du fichier jQuery.js pour désactiver globalement l'alias jQuery $ (). jQuery.noConflict renvoie une référence à jQuery, qui peut donc être utilisée pour remplacer l'alias $ () de l'objet jQuery.

Peut-être essayez-vous de le changer en:

<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>

Answer 2

J'ai trouvé la racine de ce problème:

1. Le prototype est chargé et, faute de document.getElementsByClass () dans WebKit, le prototype (insidieusement) le crée.

2. L’initialisation de jQuery commence et, tout en haut, définit la fenêtre. $ sur jQuery .

3. Lors de l'initialisation de JQuery, le moteur Sizzle (ajouté à la version 1.3.2?) est initialisé. Dans le cadre de son introspection, il recherche et teste ensuite les fonctionnalités de document.getElementsByClass () . En conséquence, il appelle l'impelementation de Prototype de getElementsByClass () , qui dépend de window. $ défini sur Prototype $ , et non de jQuery.

Finalement, cela devra être corrigé dans jQuery (voir les tickets http: //bugs.jquery. fr / ticket / 4365 et 5027 ). Mon correctif rapide consistait à supprimer l’affectation à la fenêtre. $ en haut de l’initialisation de jQuery.