3 варианта как подключить JavaScript в Drupal 7

Невероятно часто народ подключает JavaScript файлы кто как может. А ведь в Drupal'e для этого есть спец функция, которая достаточно гибкая и полезная. Поэтому рассмотрим как можно добавить JS на сайт.

Вариант 1: Через кастом-модуль

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

    // Добавляет JS
    drupal_add_js('js/script.js');
    // Добавляет JS по урл
    drupal_add_js('https://www.google.com/jsapi');
    // Добавляет конкретный JS скрипт.
    drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });');
    // И даже! Можно передать в JS нужные данные.
    // Этот код добавит значение в DOM drupal.settings.wtf текст tratata. Разумеется он будет доступен из Javascript.
    drupal_add_js(array('wtf' => 'tratata'), 'setting');

Также полезной окажется следующая функция:

drupal_get_path('module', 'wtf');

Данная функция вернет путь до места нахождения модуля. Например, если вы храните свой скрипт в модуле wtf, а там в папке js, то добавить скрипт можно двумя способами:

    // Самый первый что придет в голову
    // Но если переместить модуль, все слетит.
    drupal_add_js('sites/all/modules/wtf/js/script.js');
    // А вот более «железное» решение
    drupal_add_js(drupal_get_path('module', 'wtf') . '/js/script.js');

Вариант 2: Через тему сайта

Также можно подключать JS при помощи своей темы оформления. Напишу на примере zen-subtheme.

Создаем в папке темы новую папку и назовем js, а в неё кладем наш script.js. Затем нам достаточно открыть .info файл темы и добавить в соответствующий раздел, если нету то добавьте где сами считаете нужным, следующий код:

scripts[] = js/script.js

Вариант 3: В файле темизации

Допустим вы хотите чтобы файл подключился на определенной ноде и вы создали для неё шаблон node—NID.tpl.php. В этом случае проще всего подцепить JS непосредственно в этом файле, просто вверху напишите то что мы рассмотрели в варианте 1.

Тут будет полезна еще одна функция для опредления путей: path_to_theme() - она возвращает путь до текущей темы, как в случае с модулем.
Допустим хотим добавить файл из варианта 2 но через php:

drupal_add_js(path_to_theme() . 'js/script.js');

Просто, не так ли? А главное правильно и надежно. При этом можно просто передавать параметры в из PHP в JS, что увеличивает гибкость.

P.s.

Вы можете посмотреть как, например, я сделал в своем небольшом модуле, который сделан весь на JS, но обернут в модуль Drupal'a.

UPD. 21.09.2013

Данный метод акутален для Drupal 7. В Drupal 8 будет другой подход, читаем комментарии.

Оставайся на связи

Будь всегда в курсе новых материалов! Подписывайся на каналы\паблики\рассылки чтобы получать оперативные оповещения.

Комментарии

Ответ на от Аноним (не проверено)

N
Niklan 29.05.2013 - 11:05

Можно, но не очень хороший способ. Через drupal_add_js() можно контролировать "вес" js. Что позволит выстраивать их в нужном порядке.

В html.tpl.php не просто же так стоит переменная <?php print $scripts; ?>.

Тогда уж правильнее это реализовать в hook_page_alter() tamplate.php шаблона.

Г
Гость 17.09.2013 - 11:09

А в Drupal 8 тоже таким же макаром? или уже как-то по другому?

Ответ на от Гость (не проверено)

N
Niklan 17.09.2013 - 12:09

drupal_add_js() остался без изменений.

Подключение в теме меняется ввиду того что .info файл заменен на .info.yml.

Документации пока нету, но судя по подключению CSS файлов будет так:

scripts:

    - js/script.js

Ответ на от Niklan

N
Niklan 21.09.2013 - 14:09

UPD. Хоть drupal_add_js() и числится в Drupal 8 API. Он уже не drupal way метод. Если он и войдет в релиз, то в D9 его выпилят. Теперь все JS (в восьмерке) надо подключать через #attached. Как только будет больше инфы, напишу. А заголовок статьи меняю с указанием на семерку.

s
sg 14.12.2013 - 14:12

Дополню немного:

#attached (не обязательно применять именно к формам, хотя, судя по всему, изначально задумывался именно для этой цели)

drupal_add_library присоединяет библиотеку, библиотека по сути представляет из себя набор JS и CSS файлов, кроме того, может иметь зависимые библиотеки, которые так же будут подключены.

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

Но чаще всего все это дело используется для подключения уже существующих библиотек, в основном из ядра, тот же drupal.ajax или jquery.ui. Список системных библиотек можно подглядеть в объявлении hook_library модуля system, например, drupal_add_library('system','ui.dialog'), ну либо прописать вместо него десяток drupal_add_js... ;)

Ответ на от sg (не проверено)

N
Niklan 14.12.2013 - 14:12

Я какраз вчера разбирался в этом. Но у меня не подключалось, видимо мой косяк в том что я юзал hook_library_info()
В общем я ща какраз это разгребаю. Инфы достаточно мало в сети, а еще они очень силно разнятся, кто для дев пишет, кто для альфы и вот сидишь гадаешь какой сейчас.

Ответ на от Niklan

s
sg 14.12.2013 - 15:12

есть еще hook_libraries_info но это уже https://drupal.org/project/libraries что по сути тоже самое, только с некоторыми дополнительными возмжностями, вроде проверки версий контриб библиотек, возможноть подключения PHP библиотеки и так далее.

а вообще Ваш вариант вроде от 8рки, у 7рки именно hook_library()

А
Александр 21.12.2013 - 00:12

Никлан, почему я постоянно нагугливаю именно твои посты? доколе? ))  

респект!

А
Алексей 27.02.2014 - 12:02

Подскажите пожалуйста как правильно подключить это меню http://ascott1.github.io/bigSlide.js/, что не пробовал все равно не поучаеться.

Ответ на от Гость (не проверено)

N
Niklan 27.02.2014 - 12:02

Я еще раз говорю. JS подключается в модуле. А потом делается в возможностями JS что хотите. В блоке данный хук не сработает даже.
 

V
Volpe 26.04.2014 - 03:04

Простите, а куда нужно писать drupal_add_js ?
 

А
Алекс 25.06.2014 - 12:06

Можно разобрать такой пример?

пользователь нажимает на ссылку заказа, всплывает js окно, он вводит количество которое идет аргументом в новом пути, происходит переход по ссылке. 

Я так понимаю надо собрать ссылку в пхп поле с помощью Drupal_add_js()

Р
Роман 19.04.2016 - 11:04

drupal_add_js(path_to_theme() . 'js/script.js');
выдает ошибку:
Warning: file_get_contents(sites/all/themes/wowjs/pxloader.js): failed to open stream: No such file or directory в функции _locale_parse_js_file() (строка 1488 в файле /home/rsah/server/mysite.zz/includes/locale.inc).
так заработало:
drupal_add_js(path_to_theme() . '/js/script.js');

Добавить комментарий

Содержимое данного поля является приватным и не предназначено для показа.