Theming Guide: JavaScript in Drupal¶
Adding a Javascript file in Drupal¶
JavaScript files are now added in your library definitions in Drupal 8. These files are now named as *.libraries.yml and can be updated incrementally after being defined. In this example we are including two libraries as a dependency.
Filename¶
example.libraries.yml
File contents¶
lib:
version: VERSION
js:
js/theme.js: {}
dependencies:
- core/jquery
- core/drupal
Wrapping your JavaScript code in closure¶
Drupal best practices dictate that you wrap JavaScript code with the proper function closure, in order to properly limit the JavaScript scope. We also typically add in common parameters (jQuery, Drupal, etc) within this function to address mapping and conflicts. We also suggest using strict mode within this closure with 'use strict';.
Filename¶
example.js
File contents¶
(function ($, Drupal, window, document, undefined) {
'use strict';
// Example of Drupal behavior.
Drupal.behaviors.exampleA = {/*...*/};
// Example of Drupal behavior.
Drupal.behaviors.exampleB = {/*...*/};
})(jQuery, Drupal, this, this.document);
Adding JS code within Drupal.behaviors¶
As with previous versions of Drupal, we always wrap our code with drupal.behaviors instead of $(document).ready. In the example below, we are wanting our code to fire only on document load, but you can use the same logic for all load events and target specific DOM declarations.
Filename¶
example.js
File contents¶
(function ($, Drupal, window, document, undefined) {
'use strict';
// Example of Drupal behavior loaded.
Drupal.behaviors.exampleJS = {
attach: function (context, settings) {
if (typeof context['location'] !== 'undefined') { // Only fire on document load.
console.log('This is loaded');
}
}
};
})(jQuery, Drupal, this, this.document);