Расширение HeadScript

Компонент HeadScript расширяет Placeholder

HTML-элемент <script> используется для предоставления встроенных клиентских скриптов, либо для ссылки на удаленный ресурс, содержащий код клиентского скрипта. Помощник HeadScript позволяет управлять обоими вариантами.

Помощник HeadScript поддерживает следующие методы для установки и добавления скриптов:

• appendFile($src, $type = 'text/javascript', $attrs = [])
• offsetSetFile($index, $src, $type = 'text/javascript', $attrs = [])
• prependFile($src, $type = 'text/javascript', $attrs = [])
• setFile($src, $type = 'text/javascript', $attrs = [])
• appendScript($script, $type = 'text/javascript', $attrs = [])
• offsetSetScript($index, $script, $type = 'text/javascript', $attrs = [])
• prependScript($script, $type = 'text/javascript', $attrs = [])
• setScript($script, $type = 'text/javascript', $attrs = [])

В случае методов *File() параметр $src указывает удаленное местоположение скрипта для загрузки, обычно в форме URL или пути. Для методов *Script() параметр $script указывает на клиентские директивы скрипта, которые вы хотите использовать в элементе.

Примечание: Установка условных комментариев HeadScript позволяет обернуть тег скрипта в условные комментарии, что дает возможность скрыть его от определенных браузеров. Чтобы добавить условные теги, передайте условное значение в параметре $attrs в методах.

Пример использования HeadScript с условными комментариями

{% do pimcore_head_script().appendFile(  
    '/js/prototype.js',  
    'text/javascript',  
    {conditional: 'lt IE 11'}  
%}  

HeadScript также позволяет захватывать скрипты, что может быть полезно, если вы хотите создать клиентский скрипт программным образом и затем разместить его в другом месте. Использование этого будет продемонстрировано в примере ниже.

Кроме того, вы можете использовать метод headScript(), чтобы быстро добавить элементы скриптов; сигнатура для этого выглядит следующим образом: headScript($mode = 'FILE', $spec, $placement = 'APPEND'). Параметр $mode может принимать значение FILE или SCRIPT, в зависимости от того, ссылаетесь ли вы на скрипт или определяете его. Параметр $spec может быть либо файлом скрипта, на который вы ссылаетесь, либо самим источником скрипта. Параметр $placement должен быть равен APPEND, PREPEND или SET.

HeadScript переопределяет каждый из методов append(), offsetSet(), prepend() и set(), чтобы обеспечить использование специальных методов, перечисленных выше. Внутренне он хранит каждый элемент как токен stdClass, который позже сериализует с помощью метода itemToString(). Это позволяет вам выполнять проверки по элементам в стеке и при необходимости изменять эти элементы, просто изменив возвращаемый объект.

Примечание: Используйте InlineScript для скриптов в HTML Body Сопровождающий помощник HeadScript, InlineScript, должен использоваться, когда вы хотите встроить скрипты в тело HTML. Размещение скриптов в конце документа обычно является хорошей практикой для ускорения передачи страницы, особенно при использовании сторонних скриптов аналитики. Примечание: Произвольные атрибуты по умолчанию отключены По умолчанию HeadScript будет рендерить атрибуты <script>, которые одобрены W3C. Эти атрибуты включают 'type', 'charset', 'defer', 'async', 'language' и 'src'. Однако некоторые javascript-фреймворки используют пользовательские атрибуты для изменения поведения. Чтобы разрешить такие атрибуты, вы можете включить их с помощью метода setAllowArbitraryAttributes():

{% do pimcore_head_script().setAllowArbitraryAttributes(true) %}

Основное использование

Вы можете объявить новый тег скрипта в любое время. Как было отмечено выше, это могут быть ссылки на внешние ресурсы или сами скрипты.

{# adding scripts #}  
{% do pimcore_head_script().appendFile('/js/jquery.js').appendScript(onloadScript) %}  

Порядок загрузки скриптов часто имеет значение; вам может потребоваться убедиться, что библиотеки загружены в определенном порядке из-за зависимостей, которые у них есть. Используйте различные методы append, prepend и offsetSet для облегчения этой задачи.

{# Упорядочивание скриптов #}  
  
{# поместите с определенным смещением, чтобы обеспечить загрузку последней #}  
{% do pimcore_head_script().offsetSetFile(100, '/js/myfuncs.js') %}  
  
{# append использует следующий индекс, 101 #}  
{% do pimcore_head_script().appendFile('/js/jquery-plugin-xyz.js') %}  
  
{# но всегда сначала загружайте базовый сценарий прототипа: #}  
{% do pimcore_head_script().prependFile('/js/jquery.js') %}  

Когда вы, наконец, будете готовы вывести все скрипты в вашем шаблоне, просто вызовите помощник:

{{ pimcore_head_script() }}

Захват скриптов с помощью помощника HeadScript (устарело)

Иногда вам необходимо программно генерировать клиентские скрипты. Хотя вы можете использовать конкатенацию строк и аналогичные техники, часто проще сделать это, создав скрипт и добавив в него теги Twig. HeadScript позволяет вам делать именно это, захватывая его в стек:

{% do pimcore_head_script().captureStart() %}  
var action = '{{ baseUrl }}';  
$('#foo_form').attr("action", action);  
{% do pimcore_head_script().captureEnd() %}  

Следующие предположения принимаются во внимание:

Скрипт будет добавлен в стек. Если вы хотите, чтобы он заменил стек или был добавлен в верхнюю часть, вам нужно будет передать SET или PREPEND соответственно в качестве первого аргумента к captureStart().

Предполагается, что MIME-тип скрипта — text/javascript; если вы хотите указать другой тип, вам нужно будет передать его как второй аргумент к captureStart().

Если вы хотите указать дополнительные атрибуты для тега <script>, передайте их в массиве в качестве третьего аргумента к captureStart().

Примечание: Методы captureStart() и captureEnd() устарели с версии Pimcore 11.4.0. Используйте комбинацию set и pimcore_head_script для достижения аналогичного результата.

{% set inlineScript %}  
    var action = '{{ baseUrl }}';  
    $('#foo_form').attr("action", action);  
{% endset %}  
{% do pimcore_head_script().appendScript(inlineScript) %}  
  
{# Пример, если вы хотите указать дополнительные атрибуты для тега <script>: #}  
{% do pimcore_head_script().appendScript(inlineScript, "text/javascript", {"async": "async"}) %}  

Поддержка HTTP/2 Push

См. Поддержка HTTP/2 Push на странице HeadLink.