Yii2 подключить js файл

Обновлено: 04.07.2024

Современные веб-приложения, помимо статических HTML-страниц, содержат JavaScript, который используется для изменения страницы в браузере путем манипулирования существующими элементами или загрузки нового контента используя AJAX.

В этом разделе описываются методы, предоставляемые Yii для добавления JavaScript и CSS на веб-сайт, а также их динамическая настройка.

При работе с объектом yii\web\View можно динамически регистрировать интерфейсные скрипты. Для этого есть два специальных метода:

для встраиваемых, в тело страницы, скриптов для подключаемых, из внешних файлов, скриптов

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

Первый аргумент - это JavaScript-код, который мы хотим вставить на страницу. Он будет обёрнут в тег <script> . Второй аргумент определяет, в какой позиции скрипт должен быть вставлен на страницу. Возможные значения:

в <head> сразу после открытия тега <body> сразу после закрытия тега </body> для выполнения кода сразу после того, как DOM полностью загрузился. Этому соответствует событие ready . При этом автоматически зарегистрируется jQuery. Код будет обёрнут в соответствующий код jQuery. POS_READY является позицией по умолчанию. для выполнения кода после того, как DOM полностью загрузился (включая картинки). Событие load . Так же, как и выше, при этом автоматически зарегистрируется jQuery

Последний аргумент — это уникальный ID, который используется для идентификации блока со скриптом. При повторной регистрации происходит замена существующего скрипта на новый. Если вы не зададите ID, вместо него будет использоваться сам код. Это помогает избежать регистрации одного и того же кода несколько раз.

Аргументы для registerJsFile() аналогичны аргументам для registerCssFile(). В следующем примере мы регистрируем main.js с зависимостью от yii\web\JqueryAsset. Это означает, что main.js будет добавлен после jquery.js . Без подобного указания зависимостей относительный порядок между main.js и jquery.js будет неопределенным, и код не будет работать.

Внешний скрипт может быть добавлен следующим образом:

Вместо registerJsFile() для регистрации внешних JS-файлов настоятельно рекомендуется использовать пакеты ресурсов, поскольку они обеспечивают лучшую гибкость и более детальную конфигурацию зависимостей. Использование пакетов ресурсов также позволяет объединять и сжимать несколько JS файлов, что желательно для веб-сайтов с высоким трафиком.

Подобно JavaScript, вы можете зарегистрировать CSS используя registerCss() или registerCssFile(). Первый регистрирует блок кода CSS, а второй регистрирует внешний файл CSS.

Приведенный выше код добавит следующий код в секцию <head> страницы:

Зарегистрировать CSS файл можно следующим способом:

Приведенный выше код добавит ссылку на CSS файл /css/themes/black-and-white.css в секцию <head> страницы.

Первый аргумент указывает CSS-файл для регистрации. @web в этом примере является псевдонимом для базового URL-адреса приложения.
Второй аргумент указывает атрибуты HTML для результирующего тега <link> . Опция depends обрабатывается специально. Она указывает, от каких пакетов ресурсов зависит этот CSS файл. В этом случае зависимым пакетом ресурсов является BootstrapAsset. Это означает, что CSS файл будет добавлен после CSS файлов из BootstrapAsset.
Последний аргумент указывает ID, идентифицирующий этот CSS файл. Если он не указан, вместо него будет использоваться URL-адрес CSS файла.

Для регистрации внешних CSS файлов вместо registerCssFile() настоятельно рекомендуется использовать пакеты ресурсов. Это позволяет комбинировать и сжимать несколько CSS файлов, что желательно для сайтов с высоким трафиком. Также обеспечивается большая гибкость, поскольку все зависимости ресурсов вашего приложения настраиваются в одном месте.

Как упоминалось ранее, рекомендуется использовать пакеты ресурсов вместо регистрации CSS файлов и JavaScript напрямую. Вы можете получить подробную информацию о том, как определить пакеты ресурсов в разделе "Ресурсы".

Готовый пакет ресурсов можно использовать так:

Часто в файлах шаблонов представлений, HTML-код не записывается напрямую, а генерируется неким PHP-кодом, зависящим от переменных представления. Для того, чтобы сгенерированный HTML мог работать с Javascript, код JS также должен содержать динамические части, например идентификаторы селекторов jQuery.

Чтобы вставить переменные PHP в код JS, их значения должны быть корректно экранированы. Особенно, когда код JS вставляется в HTML, а не находится в выделенном файле JS. Для этой цели Yii предоставляет метод htmlEncode() хелпера Json. Его использование будет показано в следующих примерах.

В этом примере мы используем массив для передачи глобальных параметров конфигурации из PHP-части приложения в код интерфейса JS.

Приведенный выше код зарегистрирует тег <script> , содержащий определение переменной JavaScript, например:

Теперь в вашем JavaScript коде вы можете получить к ним доступ, например: yiiOptions.baseUrl или yiiOptions.language .

Приведенный выше пример кода использует PHP синтаксис Heredoc для лучшей читаемости. Это также обеспечивает лучшую подсветку синтаксиса в большинстве IDE, поэтому это предпочтительный способ написания встроенного JavaScript, особенно полезный для кода, более длинного чем однострочный. Переменная $message создается PHP и благодаря Json::htmlEncode содержит строку в допустимом синтаксисе JS, которую можно вставить в JavaScript код, чтобы поместить динамическую строку в вызов функции alert() .

Note: При использовании Heredoc, будьте осторожны с именами переменных в коде JS, поскольку переменные, начинающиеся с $ , могут интерпретироваться как переменные PHP, которые будут заменены их содержимым. jQuery функция в форме $( или $. не интерпретируется как переменная PHP и может безопасно использоваться.

В yii2 существует несколько способов подключения скриптов и стилей на страницах сайта.
К ним относятся комплекты ресурсов, расширяющих класс yii\web\AssetBundle и подключение
скриптов и стилей в файлах view непосредственно.

В данной статье опишу второй способ.

Работа со стилями в view.

Внутри файла view обращение к методам осуществляется с помощью $this->нужныйМетод
Внутри контроллера в экшене $this->getView()->нужныйМетод .
В других местах Yii::$app->getView()->нужныйМетод

Для регистрации стилей css в файлах видов yii\web\View есть такие методы, как registerCss() и registerCssFile()
Рассмотрим их применение на практике.

Для того, чтобы размещенные правила стилей отображались между тегами <style></style> в head
используется registerCss( $css, $options = [], $key = null ) ,
где $css - непосредственно стили,
$options - массив атрибутов тега style как, например type="text/css" ,
а $key - это ключ в виде строки для
идентификации этого набора стилей в массиве стилей, зарегестрированных в свойстве $css класса yii\web\View

Например, в блоках if() <. >else <. >.

Если нужно зарегестрировать большой список стилей, то лучше использовать отдельный файл .css
Для подключения файла стилей в виде ссылки используется $this->registerCssFile( $url, $options = [], $key = null )
, где $url - ссылка на файл стилей,

$options - Атрибуты HTML для тега ссылки в виде пар имя-значение за исключением нескольких опций,
упомянутых ниже.
Однако опция depends специально обрабатываются и не рассматриваются как атрибуты HTML. depends - это зависимости
подключаемого файла стилей в виде класса AssetBundle выглядит так 'depends'=> ['frontend\assets\AppAsset']

condition: указывает условные комментарии для IE, например, lt IE 9.
Когда это указано, сгенерированный тег ссылки будет заключен в условные комментарии.
Это в основном полезно для поддержки старых версий браузеров IE.

noscript: если установлено значение true, тег ссылки будет заключен в теги.

Остальные параметры будут отображаться как атрибуты результирующего тега ссылки.
Значения будут закодированы в формате HTML с помощью encode ().

Также есть класс хелпер yii\helpers\Html ,в котором тоже есть методы для работы со стилями. Для
регистрации файла стилей применяется статический метод yii\helpers\Html::cssFile( $url, $options = [] )
Пример:

Эффект тот же, за тем исключением, что нет возможности установить depends и ссылка выводится в том месте кода,
где прописана (не в head)

Также есть метод для вывода стилей в виде:
yii\helpers\Html::style( $content, $options = [] );

Эти методы могут быть полезны для подключения или вывода отдельных стилей именно в том месте, где их прописали.
Например в layout.php

Рассмотрим регистрацию javascript во view.

Для регистрации скриптов есть похожие с теми, что применялись для стилей методы.

Пример для registerJs

@param (string) $js - сам скрипт в виде строки.
@param (integer) $position - позиция, в которой тег сценария JS должен быть вставлен на страницу.
Возможные значения: POS_HEAD: в разделе заголовка
POS_BEGIN: в начале раздела тела
POS_END: в конце секции корпуса
POS_LOAD: заключен в jQuery (window) .load (). Обратите внимание, что с помощью этой позиции метод
автоматически зарегистрирует jQuery js-файл.
POS_READY: заключен внутри jQuery (document) .ready (). Это значение по умолчанию.
Обратите внимание, что с помощью этой позиции метод автоматически зарегистрирует jQuery js-файл.

Рассмотрим второй вариант.

$options - атрибуты HTML для тега скрипта.
Следующие параметры специально обрабатываются и не рассматриваются как атрибуты HTML:
depends: array, указывает имена пакетов активов, от которых зависит этот JS-файл.
position: указывает, где тег JS-скрипта должен быть вставлен на страницу.
Возможные значения: POS_HEAD: в разделе заголовка
POS_BEGIN: в начале раздела тела POS_END: в конце части тела. Это значение по умолчанию.

condition: указывает условные комментарии для IE, например IE IE 9.
Когда это указано, сгенерированный тег скрипта будет заключен в условные комментарии.
Это в основном полезно для поддержки старых версий браузеров IE.

Остальные параметры будут отображаться как атрибуты полученного тега сценария.
Значения будут закодированы в формате HTML с помощью encode () .
Если значение равно null, соответствующий атрибут не будет отображаться.

Регестрируем отдельную переменную
registerJsVar ( $name, $value, $position = self::POS_HEAD );
$name - имя переменной
$value - значение переменной
$position - позиция вывода кода

Возможные значения: POS_HEAD: в разделе главы. Это значение по умолчанию.
POS_BEGIN: в начале раздела тела.
POS_END: в конце части тела.
POS_LOAD: заключен в jQuery (window) .load ().
Обратите внимание, что с помощью этой позиции метод автоматически зарегистрирует jQuery js-файл.
POS_READY: заключен внутри jQuery (document) .ready ().
Обратите внимание, что с помощью этой позиции метод автоматически зарегистрирует jQuery js-файл.

Также как и для работы со стилями есть методы хелпера для работы со скриптами
yii\helpers\Html::jsFile( $url, $options = [] ) - создает тег скрипта, который ссылается на внешний файл JavaScript.
Создает тег скрипта yii\helpers\Html::script( $content, $options = [] )

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

Однако yii\helpers\Html::jsFile в $options можно указать condition что указывает условные комментарии для IE,
например IE IE 9, сгенерированный тег скрипта будет заключен в условные комментарии
для поддержки старых версий браузеров IE.

Остальное содержимое $options будет выведено в терминах пар имя-значение.

Примеры
Данные методы удобны для вывода кода в нужном месте или для сохранения в переменную и затем
вывода где требуется.

Пользуйтесь данными методами. А я буду рад любым комментариям и постараюсь ответить на все Ваши
вопросы.

Приветствую!

Меня зовут Сергей. Я - автор этого блога.

Если Вам был полезен материал на моем сайте, поддержите пожалуйста мой проект, чтобы о нем узнали другие люди - кликните plizz :) на иконку в соц. сети, чтобы поделиться материалом с другими.

Буду рад в любой поддержке для развития этого сайта. Номер карты Приват Банка 5169 3600 1047 4751

Ну так вот, приступим хватит лить водичку:

Все просто, открываем файл assets/AppAsset.php, находим такую конструкцию:

Ну и соответсвенно элементами массива прописываем пути до файлов.

Для этого открываем дирретории web/css и web/js и соответсвенно разбрасываем ваши скрипты туда-сюда, в зависимости от того, какой скрипт.

Ну и для примера приведу, есесьна :

Для подключения одного скрипта js или css на конкретной странице, прописываем следующий код:

Если Вам необходимо подключать набор файлов, создаем конкретный класс отвечающий за подключение нужных скриптов:

А затем подключаем его в нужной вьюхе:

Подробнее об этом, Вы можете посмотреть из Документации Yii.

Вот и все собственно то, ничего сложного не было вродь 🙂 .

Удачи всем в изучении!

Дмитрий

Бурдильен пер. Полонского Ночь смотрит тысячами глаз, А день глядит одним. Но солнца нет - и по земле Тьма стелется, как дым. Ум смотрит тысячами глаз, Любовь глядит одним. Но нет любви - и гаснет жизнь, И дни плывут, как дым.

21 комментарий

Дмитрий

Рад что помогло 🙂

Сергей

Дмитрий

Добавил реализацию для подключения скриптов на конкретной странице. Надеюсь Вам это поможет.

Дмитрий

Просто дело в том, что все доступные файлы извне, хранятся в дирректории /web соответственно ваши файлы оттуда берутся по умолчанию. Для переопределения можно создать свой ассет и уже через него переопределить расположение файлов.
В руководстве по ассетам есть описание свойства sourcePath:
sourcePath: задаёт корневую директорию содержащую файлы ресурса в этом комплекте. Это свойство должно быть установлено если корневая директория не доступна из Web. В противном случае, Вы должны установить basePath свойство и baseUrl свойство вместо текущего. Здесь могут быть использованы псевдонимы путей.
Вы можете объявить данное свойство например так:

class BootstrapPluginAsset extends AssetBundle public $sourcePath = '@modules/bootstrap';
.
Думаю что должно все переопределиться.

Алексей

Дмитрий

Ну папку lib можете положить в папку Web, чтобы просто не разбрасывать свои файлы и не путать с папками фреймворка.
А потом да наследуйтесь от AssetBundle и создавайте свою композицию подключенных файлов 🙂

А как указать в созданном классе где подключать в body или head ?

Дмитрий

Наталья

Дмитрий

Предполагаю, что не верно указаны пути к файлам.
Через какой инструмент отлаживаете?
Что говорит Firebug к примеру (если Вы через него отлаживаете)?

Алекс

Здесь имеется ввиду или там, или там? Или нужно и там, и там прописывать?

Дмитрий

Все в зависимости от того, что Вы подключаете.
Если идет подключение JS, да или в контроллере прописываем
$this->view->registerJsFile(‘path/to/myfile’);
или во вьюхе
$this->registerJsFile(‘path/to/myfile’);

Максим

и это правильно.
Но как я не пытался, мне так и не корректно подключить секцию $depends:
public $depends = [
'yii\web\YiiAsset',
'yii\bootstrap\BootstrapAsset',
];
соответствующая строка выглядит так
и это не правильно. Должно быть так:
.
Подскажите чего, где менять?

Дмитрий

Если Вы хотите использовать свою прежнюю конструкцию

для встраиваемых, в тело страницы, скриптов для подключаемых, из внешних файлов, скриптов

Внешний скрипт может быть добавлен следующим образом:

Приведенный выше код добавит следующий код в секцию <head> страницы:

Зарегистрировать CSS файл можно следующим способом:

Приведенный выше код добавит ссылку на CSS файл /css/themes/black-and-white.css в секцию <head> страницы.

Первый аргумент указывает CSS-файл для регистрации. @web в этом примере является псевдонимом для базового URL-адреса приложения.
Второй аргумент указывает атрибуты HTML для результирующего тега <link> . Опция depends обрабатывается специально. Она указывает, от каких пакетов ресурсов зависит этот CSS файл. В этом случае зависимым пакетом ресурсов является yii\bootstrap\BootstrapAsset . Это означает, что CSS файл будет добавлен после CSS файлов из yii\bootstrap\BootstrapAsset .
Последний аргумент указывает ID, идентифицирующий этот CSS файл. Если он не указан, вместо него будет использоваться URL-адрес CSS файла.

Готовый пакет ресурсов можно использовать так:

Генерация динамического Javascript ¶

Приведенный выше код зарегистрирует тег <script> , содержащий определение переменной JavaScript, например:

Теперь в вашем JavaScript коде вы можете получить к ним доступ, например: yiiOptions.baseUrl или yiiOptions.language .

Примечание: При использовании Heredoc, будьте осторожны с именами переменных в коде JS, поскольку переменные, начинающиеся с $ , могут интерпретироваться как переменные PHP, которые будут заменены их содержимым. jQuery функция в форме $( или $. не интерпретируется как переменная PHP и может безопасно использоваться.

Читайте также:

Yii2 подключить js файл

Работа со стилями в view.

Рассмотрим регистрацию javascript во view.

Приветствую!

Дмитрий

Вам также может понравиться

Error debugger of Symfony

Увлажнитель воздуха в комнату на пульте управления

Объединение посылок из Aliexpress

21 комментарий

Дмитрий

Сергей

Дмитрий

Дмитрий

Алексей

Дмитрий

Дмитрий

Наталья

Дмитрий

Алекс

Дмитрий

Максим

Дмитрий

Генерация динамического Javascript ¶