Работа с прототипом и jQuery, включая внешние файлы js на той же странице

0

Я работаю над проблемой интеграции, имея дело со старым сайтом, на котором есть много сценариев, основанных на прототипе. Я должен интегрировать его в внешний шаблон веб-сайта, который использует скрипт (позвольте ему вызывать его external-jquery-script.js), на котором я не контролирую, который использует jQuery.

external-jquery-script.js использует оператор $, и, очевидно, скрипт конфликтует с прототипом. Проблема конкретно связана с функцией во external-jquery-script.js (позвольте ей вызвать externalFunction()), которая необходима для правильной работы шаблона.

Я не могу изменить внешний шаблон, но я могу просто заполнить доступные заполнители.

На странице, полученной в результате интеграции, у меня есть следующее:

<html>
  <!-- external template stuff - begin -->
...
  <script src="http://www.external-website.com/js/common/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="http://www.external-website.com/js/common/external-jquery-script.js"></script>
...
  <!-- external template stuff - end -->
  <!-- my page stuff - begin -->
...
  <script type="text/javascript" src="http://www.my-website.com/js/prototype.min.js"></script>
  <script type="text/javascript" src="http://www.my-website.com/js/script.js"></script>
...
  <!-- my page stuff - end -->
... <!-- other contents... --> ...
</html>

Теперь, я попробовал redeclaring externalFunction() в моем script.js, но все равно это не работает.

Я обновил его следующим образом:

(function($){
window.externalFunction = function(){
... //copied as is from external-jquery-script.js
}
})(jQuery);

У меня есть два вопроса:

  1. Есть ли способ включить external-jquery-script.js говорит сценарию использовать оператор $ как оператор jQuery?
  2. Если ответ на первый вопрос "Нет", как бы вы предложили мне решить эту проблему?
  • 0
    просто используйте noConflict, чтобы определить имя переменной, которую вы хотите использовать для библиотеки js
  • 0
    возможный дубликат использования JQuery и Prototype на той же странице
Показать ещё 4 комментария
Теги:
prototypejs

1 ответ

0
Лучший ответ

Я нашел решение своей проблемы, которую я поделюсь здесь.

Поскольку я не мог изменить шаблон, за исключением области "страницы моей страницы", я решил переопределить часть шаблона jQuery, автоматически загружая сценарий через cron и автоматически заменяя вызовы jQuery прототипом/безопасную версию, включая фиксированный скрипт на странице, после оригинальной версии.

Теперь, поскольку сценарий добавил слушателя $(document).ready, мне также пришлось заменить его версией Prototype, отключив (в некотором смысле) прослушиватель jQuery.

Вот сценарий, который выполняет автоматическую замену ($1 представляет собой имя скрипта js, переданное как параметр):

#!/bin/bash
sed -i "s#\$(document)\.ready(#document\.observe(\'dom\:loaded\'\,#g" $1 ##THIS REPLACES $(document).ready with the prototype equivalent
sed -i 's#\$(#jQuery(#g' $1 ##THIS REPLACES $( with jQuery(
sed -i 's#\$\.#jQuery\.#g' $1 ##THIS REPLACES $. with jQuery.
sed -i 's#(\$)#(jQuery)#g' $1 ##THIS REPLACES ($) with (jQuery)

прежде чем включать этот новый скрипт, я также добавил следующий скрипт, чтобы избежать конфликтов и предотвратить $(document).ready.:

<script>
<!--
        jQuery = jQuery.noConflict(true); //After this jQuery is callable only throught the jQuery variable
        jQuery.holdReady(true); //After this jQuery(document).ready stays pending, waiting for a jQuery.holdReady(false) that will never come, turning off the listener in the first jQuery script, that would cause problems otherwise
-->
</script>

Таким образом, теперь у меня есть следующая, отлично работающая, имеющая как jQuery, так и Prototype на той же странице, используя внешний шаблон, включая исправленную версию external-jquery-script.js:

<html>
  <!-- external template stuff - begin -->
...
  <script src="http://www.external-website.com/js/common/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="http://www.external-website.com/js/common/external-jquery-script.js"></script>
...
  <!-- external template stuff - end -->
  <!-- my page stuff - begin -->
...
  <script>
  <!--
        jQuery = jQuery.noConflict(true);
        jQuery.holdReady(true);
  -->
  </script>
  <script type="text/javascript" src="http://www.my-website.com/js/prototype.min.js"></script>
  <script type="text/javascript" src="http://www.my-website.com/js/external-jquery-script-fixed.js"></script>
  <script type="text/javascript" src="http://www.my-website.com/js/script.js"></script>
...
  <!-- my page stuff - end -->
... <!-- other contents... --> ...
</html>
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню