Подключение JS, CSS из любого расширения Joomla
Подключаем стили, скрипты или кастомные теги из модулей, плагинов, компонентов или шаблона
Joomla4
- Как правильно подключать JavaScript и CSS в Joomla 4 - jpath.ru
- Web Assets - docs.joomla.org
Joomla 3
Говорят, что описанный ниже метод устарел и позже будет удален из ядра Joomla. Новый (и более чистый) метод асинхронной загрузки файла JavaScript в Joomla выглядит следующим образом:
// В шаблоне в папке "js" асинхронно
JHtml::_('script', 'template.js', array('version' => 'auto', 'relative' => true), array('async' => 'async'));
// Где-то с другого ресурса
JHtml::_('script', 'https://url/yourscript.js', array('version' => 'auto', 'relative' => true), array('defer' => 'defer'));
По сути, последний массив в приведенном выше вызове функции является массивом атрибутов , поэтому технически любой атрибут, поддерживаемый Joomla, должен работать. Если вы добавите неподдерживаемый атрибут, такой как 'myattribute'=>'myattribute'
в последний массив, тогда Joomla добавит в конец тега HTML скрипта следующее : myattribute=”myattribute”
. Это полезно, если вы хотите загрузить пользовательские атрибуты, которые впоследствии обрабатываются внутренним или внешним скриптом.
Где посмотреть, какая функция в ядре Joomla выполняет всю работу?
Если вы действительно хотите знать, то это функция addScript
, которая находится в файле Document.php
, который, в свою очередь, находится в папке library/src/Document
.
Раньше
head
Во-первых, нужно получить ссылку на текущий объект документа, без этого - никак.
$document = JFactory::getDocument(); // Подключаем один раз
Подключить файл CSS или JS
$document->addStyleSheet($url); // для стилей
$document->addScript($url); // для Javascript
где $url
- переменная, содержащая полный путь к файлу javascript или CSS, например: JUri::base() . 'templates/custom/js/sample.js'
defer async
Так же для скриптов можно передать параметры:
- Тип скрипта, если это не JavaScript,
- defer
- async
$doc->addScript('/media/system/js/sample.js', "text/javascript", true, false);
$doc->addScript('/media/system/js/sample.js', "text/javascript", false, true);
Если у тега SCRIPT есть атрибут async или defer(true), то браузер ставит его в очередь на загрузку и, не задерживаясь, продолжает отображать страницу.
Когда скрипт загрузится — он выполнится.
Разница между этими двумя атрибутами заключается в том, что defer сохраняет порядок выполнения скриптов, а async — нет.
Инлайн стили и скрипты
// Javascript
$document->addScriptDeclaration('
window.event("domready", function() {
alert("An inline JavaScript Declaration");
});
');
// CSS
$style = 'body {'
. 'background: #00ff00;'
. 'color: rgb(0,0,255);'
. '}';
$document->addStyleDeclaration($style);
Или свой тег
$stylelink = '<!--[if lte IE 6]>' ."\n";
$stylelink .= '<link rel="stylesheet" href="/../css/IEonly.css" />' ."\n";
$stylelink .= '<![endif]-->' ."\n";
$document = JFactory::getDocument();
$document->addCustomTag($stylelink);
Для шаблона вроде как есть более удачный вариант:
$this
->addStyleSheet('/templates/'.$this->template.'/css/template.css')
->addStyleSheet('/templates/'.$this->template.'/css/menu.css')
->addScript('/templates/'.$this->template.'/js/menu.js');
Почему удобнее написано тут: https://joomlaforum.ru/index.php/topic,278856.msg1387215.html#msg1387215
Перенос скриптов вниз страницы
Да так, чтоб они подключались из любого расширения Joomla.
в шаблоне
$path = $this->baseurl . '/templates/' . $this->template . '/';
// Add JavaScript Frameworks
$this->footerScript[$path . 'js/jquery-1.9.1.min.js'] = 1;
$this->footerScript[$path . 'js/bootstrap.min.js'] = 1;
$this->footerScript[$path . 'js/common.js'] = 10;
в конце шаблона
<?php
if (is_array($this->footerScript))
{
$scriptHtml = '';
asort($this->footerScript, SORT_NUMERIC);
foreach (array_keys($this->footerScript) as $script):
$scriptHtml .= '<script src="' . $script . '"></script>';
endforeach;
echo $scriptHtml;
}
?>
</body>
В любом расширении
$doc = JFactory::getDocument();
$doc->footerScript[ 'myPath/myScript.js'] = 1; // оперируя цифрами в значении мы оперируем порядком вывода
Ссылки и благодарности
Взято из документации: docs.joomla.org
С JoomlaForum:
- вот тема,
- Про defer и async
- Загрузка внизу