Niklan

Три метода добавления JavaScript на страницы Drupal 7

Узнайте, как легко подключить JavaScript в Drupal 7: через кастом-модуль с помощью drupal_add_js(), через тему сайта, добавляя скрипты в .info файл, и используя hook_library для управления библиотеками JS.

29.05.2013
23 комментария
2 мин.

Невероятно часто народ подключает 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 будет другой подход, читаем комментарии.

Drupal
Drupal 7
JavaScript
← Предыдущий Как подготовить проект для публикации на drupal.org
Следующий → Как ускорить работу сайта на Drupal 7 с модулем Boost

Комментарии

Niklan   ср, 29/05/2013 - 11:21

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

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

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

Гость   вт, 17/09/2013 - 11:44

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

Niklan   вт, 17/09/2013 - 12:54

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

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

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

scripts:

    - js/script.js

Niklan   сб, 21/09/2013 - 14:11

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

vortex   пн, 23/09/2013 - 17:36

Подскажите, а вслучае с этим:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Как сделать такой фильтр для IE?

Я пока сделал внутри page.tpl.php (но уже вижу что надо было в  html-шаблон).

sg   сб, 14/12/2013 - 14:11

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

#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... ;)

Niklan   сб, 14/12/2013 - 14:17

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

sg   сб, 14/12/2013 - 15:17

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

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

Александр   сб, 21/12/2013 - 00:55

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

респект!

Гость   чт, 27/02/2014 - 12:31

не могу понять как его вывести, создал блок но ничего не получается

Гость   чт, 27/02/2014 - 12:44

Я хочу чтобы там выводилось не без только меню а и аватарка.

 

Niklan   чт, 27/02/2014 - 12:45

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

Алекс   ср, 25/06/2014 - 12:31

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

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

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

Роман   вт, 19/04/2016 - 11:45

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');

Андрей   пн, 12/12/2022 - 22:15

Niklan, добрый вечер! Подскажите, а если на сайте все скрипты указанные в .info файле темы (подключены по вар. 2 через тему сайта) загружаются в head страницы и мне бы хотелось убрать некоторые из них... Будет ли верно утверждение, что мне надо удалить эти скрипты из .info файла и из соответствующей папки в теме? Нужно ли заново компилировать файл .info или достаточно очистить кеш?

Содержание