Подключение jQuery в Битрикс пошаговое руководство
Главная › Программа › 25 ›

Как подключить jquery битрикс

Как подключить jquery битрикс

Системе 1С-Битрикс не всегда требуется подключение сторонних библиотек, так как она уже содержит собственный набор инструментов. Однако во многих проектах разработчикам необходимо использовать jQuery для реализации динамических элементов интерфейса, кастомных скриптов или готовых плагинов. Важно учитывать правильный способ подключения, чтобы избежать дублирования кода и конфликтов версий.

В Битриксе jQuery можно подключить через api CJSCore, который управляет зависимостями JavaScript. Это гарантирует корректную загрузку библиотеки и исключает ручное добавление файлов. Для этого в файле шаблона header.php достаточно вызвать метод CJSCore::Init(array(«jquery»)). Такой подход удобен тем, что библиотека подгружается централизованно и совместимо с другими модулями системы.

При необходимости использовать конкретную версию jQuery рекомендуется зарегистрировать её в init.php, определив путь к файлу и добавив через CUtil::InitJSCore. Этот метод позволяет контролировать подключение сторонних скриптов без риска перезаписать стандартные ресурсы Битрикса. Важно избегать прямого подключения через script src, так как это может вызвать некорректную работу модулей или конфликт с AJAX-компонентами.

Проверка наличия встроенной версии jQuery в Битрикс

Проверка наличия встроенной версии jQuery в Битрикс

Перед ручным подключением jQuery необходимо убедиться, что библиотека уже не загружается системой. В Битрикс jQuery может быть активирована через ядро, поэтому дублирование приведет к конфликтам.

  • Откройте код страницы в браузере и выполните команду в консоли: typeof jQuery. Если результат "function" – библиотека уже подключена.
  • Проверьте заголовок <head> в HTML-коде страницы. Ищите строку с /bitrix/js/main/jquery/ – это путь к встроенной версии.
  • В административной панели откройте раздел Настройки → Настройки продукта → Настройки модулей → Главный модуль. В блоке «Использовать jQuery» можно включить или отключить загрузку.

Если библиотека присутствует, следует использовать её, а не подключать стороннюю копию. Версию можно уточнить командой jQuery.fn.jquery в консоли браузера.

Подключение jQuery через init.php

Подключение jQuery через init.php

Файл /bitrix/php_interface/init.php выполняется при каждом запуске сайта. Подключение jQuery здесь позволяет загрузить библиотеку глобально, без редактирования шаблонов.

Пример кода для подключения стандартной версии jQuery, идущей с Битрикс:

<?php
use Bitrix\Main\Page\Asset;
AddEventHandler("main", "OnEpilog", function() {
Asset::getInstance()->addJs(CUtil::GetAdditionalFileURL("/bitrix/js/main/jquery/jquery-3.6.0.min.js"));
});
?>

Если требуется собственная версия jQuery, укажите путь к файлу в папке шаблона:

<?php
use Bitrix\Main\Page\Asset;
AddEventHandler("main", "OnEpilog", function() {
Asset::getInstance()->addJs(SITE_TEMPLATE_PATH . "/js/jquery-3.7.1.min.js");
});
?>

Рекомендуется хранить сторонние библиотеки в директории /local/templates/[шаблон]/js/, чтобы не затронуть системные файлы.

Способ Путь Особенности
Стандартный jQuery /bitrix/js/main/jquery/ Обновляется вместе с ядром Битрикс
Собственный файл /local/templates/[шаблон]/js/ Полный контроль над версией библиотеки

После добавления кода очистите кеш и убедитесь через консоль браузера, что jQuery загружен без ошибок.

Использование метода CJSCore::Init для загрузки jQuery

В Битрикс библиотека jQuery доступна через ядро JavaScript, и для её подключения используется метод CJSCore::Init. Такой способ гарантирует корректную загрузку без дублирования и конфликтов.

Пример вызова в шаблоне компонента или в файле header.php:

<?php
if (\Bitrix\Main\Loader::includeModule("main")) {
CJSCore::Init(["jquery"]);
}
?>

Массив в CJSCore::Init может содержать несколько библиотек. Для подключения только jQuery достаточно передать ["jquery"]. При необходимости можно указать дополнительные модули, например ["jquery", "ajax"].

После вызова jQuery становится доступен глобально через стандартные селекторы $ и jQuery, что позволяет сразу использовать её в скриптах.

Добавление jQuery в шаблон сайта Битрикс

Для подключения jQuery в шаблоне необходимо отредактировать файл /bitrix/templates/ИМЯ_ШАБЛОНА/header.php. Библиотека подключается через метод CJSCore::Init(), что гарантирует корректную работу без дублирования.

Пример подключения:

<?php
if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true) die();
CJSCore::Init(array("jquery"));
?>

Данный вызов должен располагаться до закрывающего тега </head>. После этого jQuery будет доступен во всех компонентах и скриптах текущего шаблона.

Если требуется подключить конкретную версию, её можно добавить вручную через тег <script> в том же файле, предварительно отключив стандартное ядро jQuery в настройках:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Использование встроенного механизма CJSCore предпочтительно, так как он автоматически учитывает зависимости и оптимизирует загрузку.

Подключение внешней версии jQuery с CDN

Подключение внешней версии jQuery с CDN

Для использования jQuery из внешнего источника в Битрикс рекомендуется подключать библиотеку через CDN. Это ускоряет загрузку сайта за счёт кэширования в браузерах пользователей и снижает нагрузку на сервер.

Порядок действий:

  1. Откройте шаблон сайта: /bitrix/templates/ВАШ_ШАБЛОН/header.php.
  2. Найдите перед закрывающим тегом </head> или </body> участок, где удобно разместить подключение.
  3. Добавьте код:
<script src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
crossorigin="anonymous"></script>

Рекомендации:

  • Используйте актуальную версию с официального CDN code.jquery.com.
  • Для повышения безопасности всегда указывайте атрибуты integrity и crossorigin.
  • Проверьте, чтобы встроенный jQuery из ядра Битрикс не загружался одновременно. Для этого отключите его в настройках или через метод CJSCore::Init используйте только необходимые модули без jQuery.
  • После замены протестируйте работу всех скриптов шаблона, так как порядок подключения может влиять на функционал.

Настройка порядка загрузки jQuery и других скриптов

В Битрикс порядок подключения скриптов критичен для корректной работы зависимостей. jQuery должен загружаться до любых скриптов, использующих его функции. В стандартной структуре шаблона подключение осуществляется через метод CJSCore::Init(). Пример для jQuery:

<?php CJSCore::Init(array('jquery')); ?>

Если дополнительно подключаются сторонние библиотеки или кастомные скрипты, их нужно подключать после вызова CJSCore::Init(), используя $APPLICATION->AddHeadScript(). Пример:

$APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . "/js/custom.js");

Для контроля порядка загрузки нескольких файлов используйте массивы в CJSCore::Init() для стандартных компонентов Битрикс. Например:

CJSCore::Init(array('jquery', 'popup', 'fx'));

Этот вызов гарантирует, что jQuery загрузится первым, затем подключатся popup и fx.

Проверку порядка загрузки можно выполнить через консоль браузера, вызвав console.log($) после подключения всех скриптов. Если объект jQuery определен, порядок соблюден.

Проверка работы jQuery в консоли браузера

Откройте любую страницу сайта Битрикс в браузере и запустите консоль разработчика. В Google Chrome это комбинация клавиш Ctrl+Shift+J, в Firefox – Ctrl+Shift+K.

Введите команду jQuery или сокращение $ и нажмите Enter. Если библиотека подключена корректно, консоль отобразит функцию jQuery с версией, например: ƒ (selector, context){…}.

Для проверки работоспособности напишите простую команду: $(document).ready(function(){ console.log("jQuery работает"); });. После перезагрузки страницы в консоли должно появиться сообщение jQuery работает.

Можно проверить версию напрямую командой jQuery.fn.jquery или $.fn.jquery. Консоль вернет строку с номером версии, что подтверждает корректное подключение.

Если консоль возвращает undefined или ошибку $ is not defined, значит подключение jQuery не выполнено или скрипт подключен после проверки. Проверьте порядок подключения файлов в шаблоне и убедитесь, что путь к jQuery указан правильно.

Для более детальной диагностики можно вызвать метод $("body").length. Если результат больше нуля, библиотека успешно взаимодействует с DOM.

Вопрос-ответ:

Как подключить jQuery в шаблон сайта на Битрикс?

В Битрикс есть несколько способов подключения jQuery. Один из самых простых — использовать стандартную библиотеку, уже встроенную в систему. Для этого в шаблоне страницы нужно вызвать метод CJSCore::Init с параметром «jquery». Пример: CJSCore::Init(["jquery"]). После этого скрипты jQuery будут доступны на странице, и можно использовать их в своих скриптах.

Можно ли подключить jQuery через CDN в Битрикс?

Да, подключение через CDN возможно. Для этого в файле шаблона подключают внешний скрипт с помощью тега