Javascript richtig einbinden

Dieses Tutorial ist spezifisch für Drupal 7. Das Drupal 6 Tutorial: Javascript richtig einbinden findest du hier.

Am einfachsten ist es, Javascript Dateien über die .info-Dateien eines Themes oder (neu in Drupal 7) eines Moduls einzubinden. Seit Drupal 6 kann man dies über die theme-name.info Datei (jedes Modul und Theme besitzen diese Datei im Modul oder Theme Ordner). Seit Drupal 7 ist dies auch über die modul-name.info Datei möglich.

Beispiel für die theme-name.info Datei

; $Id:$
name = Theme Name
description = Beschreibung
core = 6.x
engine = phptemplate

scripts[] = js/jquery.cycle.all.min.js
scripts[] = js/jquery.cycle.custom.js

Im Beispiel befinden sich die beiden eingebundenen Javascript Dateien im Theme Ordner in einem Unterverzeichnis namens "js".

Wem das schon zu viel Code ist der sollte sich ersteinmal das Modul JS Injector (Drupal 7 Version ist für Ende Februar 2011 geplant) anschauen.

Javascript in Drupal 7 richtig notieren

Für Drupal 7 gibt es einige neu Techniken die noch mehr Flexibiltät beim Einbinden von Javascript bieten, allerdings muss man auch deutlich mehr beachten.

jQuery in Drupal 7

Jeder jQuery-Code der $ benutzt, muss nun in folgendes Konstrukt eingebaut werden, sonst droht der Fehler Uncaught TypeError: Property '$' of object [object DOMWindow] is not a function or similar.

(function ($) {
  // Hier kann nun wie gewohnt jQuery-Code stehen.
})(jQuery);

Drupal.behaviors in Drupal 7

Seit Drupal 6 gibt es die Methode Drupal.behaviors um Javascript in Drupal einzubinden. Dies stellt sicher, dass auch dynamische Elemente des DOM gefunden und modifiziert werden können. Mit der alten Methode $(document).ready() funktioniert dies leider nicht. Drupal.behaviors ist vergleichbar mit der jQuery Funktion "live".

Die Funktionsweise von Drupal.behaviors hat sich in Drupal7 geändert. Es muss nun ein so genannter "attach Handler" definiert werden. Damit ändert sich das Konstrukt für Drupal7 folgendermaßen

(function ($) {

  Drupal.behaviors.exampleModule = {
    attach: function(context, settings) {
      // Hier kann nun wie gewohnt jQuery-Code stehen.
    }
  };

})(jQuery);

Javascript über die PHP Funktionen drupal_add_js und drupal_add_library einbinden

Neu in Drupal 7 - JavaScript Libraries

Will man beispielsweise ein jQuery Plugin einbinden, dass neben Javascript Dateien auch CSS Dateien enthält, solte man diese über hook_library definieren und mit drupal_add_library (anstatt drupal_add_js) einbinden.

Erweitert in Drupal 7 - drupal_add_js

Javascript direkt einbinden

<?php
drupal_add_js
('   
  (function ($) {
    Drupal.behaviors.exampleModule = {
      attach: function(context, settings) {
        // Hier kann nun wie gewohnt jQuery-Code stehen.
      }
    };
  })(jQuery);
'
, 'inline');
?>

Eine Javascript-Datei einbinden

<?php
drupal_add_js
('/pfad/zur/javascript-datei.js', 'file');
?>

Dieser Code sollte entweder der Datei template.php im aktiven Theme Ordner platziert werden, oder in einem eigenen Modul. Zum Beispiel über hook_init().

<?php
function deinModulName_init() {
 
// Javascript direkt einbinden
 
drupal_add_js('   
    (function ($) {
      Drupal.behaviors.exampleModule = {
        attach: function(context, settings) {
          // Hier kann nun wie gewohnt jQuery-Code stehen.
        }
      };
    })(jQuery);
  '
, 'inline');

 
// Eine Javascript-Datei einbinden
 
drupal_add_js( drupal_get_path('module', 'deinModulName') . '/javascript-datei.js', 'file');
}
?>

Weitere Beispiele:

<?php
 
// Eine Datei einbinden.
 
drupal_add_js('misc/collapse.js', 'file');
 
// Inline-JS einbinden.
 
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });', 'inline');
 
// Inline-JS mit weiteren Optionen einbinden.
 
drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });',
    array(
'type' => 'inline', 'scope' => 'footer', 'weight' => 5)
  );
 
// Externes JS einbinden.
 
drupal_add_js('http://example.com/example.js', 'external');
 
// JS-Setting einbinden.
 
drupal_add_js(array('myModule' => array('key' => 'value')), 'setting');
 
// Eine Library (z.b. jQuery Plugin) einbinden.
 
drupal_add_js('misc/collapse.js',
    array(
'type' => 'file', 'scope' => 'footer', 'group' => JS_LIBRARY)
  );
?>

Hier die vollständige englische Dokumentation auf api.drupal.org.

Javascript auf ausgewählten Seiten einbinden

Wenn man Javascript nur auf einigen Seiten einbinden möchte kann man das zum Beispiel über eine if-Abfrage im hook_init machen.

<?php
function deinModulName_init() {
 
// Nur auf node/123 einbinden
 
if (arg(0) == 'node' AND arg(1) == 123) {
   
// Hier drupal_add_js(...);
 
}
}
?>

Kommentare

HI! ansich scheint das

HI!

ansich scheint das wirklich simpel zu sein so ein bisschen js in ein D7-Theme einzubinden. Aber ich bekomme das nicht geschissen.
Ich habe zwei .js-Datein in meinem Theme-Ordner. Einmal menu.js und einmal jquery.min.js Mit diesen beiden Datein will ich jetzt ein paar Button eines separaten Menüs so ein bisschen Animieren. (Das Manü habe ich schon eingefügt, war kein Problem.)

Ich habe jetzt beide Methoden schon ausprobiert. In meiner .info-Datei steht:

name = Garland
description = A multi-column theme which can be configured to modify colors and switch between fixed and fluid width layouts.
package = Core
version = VERSION
core = 7.x
stylesheets[all][] = style.css
stylesheets[print][] = print.css
settings[garland_width] = fluid
scripts[] = menu.js
scripts[] = jquery.min.js

; Information added by drupal.org packaging script on 2011-06-30
version = "7.4"
project = "drupal"
datestamp = "1309397516"

und in meiner template.php hatte ich dieses hier stehen, direkt an der ersten Zeile:

<?php
drupal_add_js('menu.js', 'file');
?>
<?php
drupal_add_js('jquery.min.js', 'file');
?>

Keins der Beiden funktioniert? Was mache ich falsch?

Kann mir jemand helfen?
(Ich habe übrigens von php keine Ahnung :( )

Vielen Dank,

Grüße
jörn

Hallo Jörn, jQuery wird

Hallo Jörn, jQuery wird automatisch eingebunden. Das heißt du musst es nicht separat einbinden. Das macht Drupal Core automatisch für Dich.

Wenn du die Files über die .info einbindest musst du die Theme-Registry neu aufbauen es reicht dazu die Seite "admin/appearance" aufzurufen.

In der tempalte.php brauchst du die php Tags nicht und du solltest den cache leeren, am besten du installierst dazu das Admin Menu Modul (http://drupal.org/project/admin_menu).

Müsste klappen.

Danke. Endlich mal eine super

Danke. Endlich mal eine super Einführung in das Thema, die behandelt was an den D7 Änderungen php und was javascript sind .. Ohne dazu "Bücher" lesen zu müssen!!

Hi, wenn ich JavaScript auf

Hi,
wenn ich JavaScript auf der verlinkten HP einrichte, erhalte ich im Quelltext den entsprechenden Vermerk, aber das alert wird nicht ausgeführt.
Hast du eine Idee woran das liegen könnte? Ich mache das über die Template.php
mit freundlichem Gruß
TIm

Danke, ich habe nachgeschaut

Danke, ich habe nachgeschaut weil ich mir eine Frameblocker für meine Seite machen musste.

In Drupal 7 - das Javascript direkt einbinden wollte und hier auch fand. Viele Grüße aus der Pfalz

Kommentar verfassen

Der Inhalt dieses Feldes wird nicht öffentlich gezeigt.