Подключение CSS и JS файлов

Подключение CSS и JS файлов

Регулярно встречаю подключение JS библиотек с помощью тега <script src='....'> , когда арсенале Bitrix есть отложенная функция
AddHeadScript, имеющая ряд преимуществ перед вышеуказанным методом:
  • позволяет управлять порядком подключения скриптов на странице;
  • позволяет включать объединение JS на сайте в пару кликов, что благоприятно скажется на производительности сайта, а, следовательно, и на индексации поисковыми системами;
  • при изменение файла автоматически сбраситься кеш;
  • при повторных вызовах файл не будет подключаться снова.
По этим же причинам не рекомендуется использовать подключение скриптов с помощью
<script>BX.loadScript("script.js");</script>
Для подключения стилей так же существует специальная функция с аналогичными преимуществами $APPLICATION->SetAdditionalCSS()
$APPLICATION->SetAdditionalCSS("/bitrix/templates/demo/additional.css");
и $APPLICATION->AddHeadString() - для подключения строки в секцию <head>…</head> сайта

$APPLICATION->AddHeadString('<link href="'.$APPLICATION->GetCurDir().'"style.css";  type="text/css" rel="stylesheet" />',true);
Её удобно использовать совместно с хаками, для вывода лишь в определенных браузерах.

P.S> в новых версиях Bitrix рекомендуется использовать  новые аналоги вышеуказанных функций:
use Bitrix\Main\Page\Asset;

Asset::getInstance()->addJs('scrpt.js');
Asset::getInstance()->addCss('style.css');
Asset::getInstance()->addString("<link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.css'>"); 
Для подключения внешних файлов стилей и скриптов из шаблона компонента существует два подхода: - Старый метод:
производить подключение в файле component_epilog.php:
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED!==true) die();

global $APPLICATION;

$APPLICATION->SetAdditionalCss('/assets/styles.css');

- Функционал ядра D7:
в template.php:
$this->addExternalCss('/assets/styles.css');
$this->addExternalJS('/assets/local/liba.js');


Рейтинг

Возврат к списку

Раздел Bitrix
(Codeblog)