Битрикс. Динамическое прикрепление css, javascript файлов в шапке шаблона из своих модулей, компонентов
При разработке сайта на битриксе зачастую разработчик по сути является интегратором, использует готовое, подправляет стили и всё готово. Это плюс битрикса и как я считаю минус для разработчика, так как интерес к такому интегрированию скоро, если не сразу, пропадает.
Другое дело когда пишем свои модули, компоненты. Поговорим об подключении своих файлов css, javascript динамически в шапке шаблона.
Допустим мы разрабатываем свой компонент и ему для работы нужно чтобы были подключены файлы стилей и/или javascript. Прописывать всё заранее в шапке шаблона — это не очень, так как файлы будут подгружаться как когда компонент присутствует на странице, так и когда его нет на странице, а может он, компонент, вообще удалён со всех страниц, а файлы стилей грузятся и создают хоть и мелочную, но нагрузку на сервер.
Выход — нужно подключать стили, скрипты когда только нужно, динамически, во время выполнения компонента. Для этого в коде компонента можно использовать следующие методы.
Подключаем CSS файлы в шапке
|
1 |
$APPLICATION->SetAdditionalCSS("/path/to/css/styles.css"); |
Данный код подключит в шапке сайта файл css, причём вставится тот путь, который вы указали. То есть между <head> и </head> будет добавлен код
|
1 |
<link rel="stylesheet" href="/path/to/css/styles.css" type="text/css" /> |
При всём при этом будет проверяться, есть ли такой файл в файловой системе. Если нет, то и упоминаний в шапке об этом файле не будет.
Далее
Подключаем javascript файлы
|
1 |
$APPLICATION->AddHeadScript('/js/js.js'); |
Будет подключён javascript файл /js/js.js в шапке(здесь и далее говоря про шапку я имею ввиду текст между <head>и </head>).
Далее
Вставляем в шапку произвольную строку
|
1 |
$APPLICATION->AddHeadString('<style type="text/css">.aaaa{}</style>', true); |
Будет выведена заданная строка в шапке. Второй параметр отвечает за уникальность строки. Если она уже была добавлена(выведена), то повторно добавляться не будет.
Вообще все эти дополнительные файлы, строки будут выводиться в том месте, где у нас в шаблоне стоит
|
1 |
$APPLICATION->ShowHead(); |
То есть мы сначала через эти методы регистрируем наши файлы, код, а после метод ShowHead всё это выводит. Выводить будет в следующем порядке:
- сначала стили, заданные через метод SetAdditionalCSS,
- после скрипты, заданные через метод AddHeadScript,
- после заданные строки через метод AddHeadString.
Если вы хотите посмотреть официальную документацию, то ищите описание класса CMain главного модуля. $APPLICATION это и есть экземпляр данного класса. Собственно вот ссылка. Советую там пробежаться глазами и по другим методам.
Вообще говоря в документации по некоторым из этих методов нет подробного описания.
PS
Всё это конечно здорово, что есть такие средства. Но по моему всё это блекнет на фоне возможностей, которые дают различные фреймворки, например Yii.
На примере Yii там есть возможность публикации ресурсов. В битрикс же файлы наверное должны лежать в папке с компонентом.
В Yii можно задавать место вывода файлов — в шапке, после <body>, перед </body>. В Битриксе по моему то же можно добиться вывода нужных файлов в разных частях. Сейчас уже не помню где читал. Сдаётся мне можно управлять выводом CSS через методы GetCSS и ShowCSS того же класса CMain.
В Yii можно задавать составлять пакеты файлов. Можно сжимать, объединять файлы.
