Nachdem ich im letzten Artikel dieser Reihe erläutert habe, wie die korrekten Wege zum Einbinden zusätzlicher JavaScript-Dateien im Theme sind, möchte ich nun Alternativen zu direkten Event-Handlern auf dem Body-Tag in der page.tpl.php aufzeigen.
Das Problem
Ich hatte vor meinen Optimierungen zwei Eventhandler direkt im Body-Tag aufgeführt. Dies hat jedoch den Nachteil, daß eine Einschränkung auf bestimmte Seiten nur über unschöne if-Anweisungen direkt in der page.tpl.php möglich war. Dies wollte ich im Rahmen der Lesbarkeit jedoch unbedingt vermeiden.
Die Lösung
In Variante C meines ersten Artikels habe ich ja schon eine Möglichkeit zur Einbindung von JavaScript-Dateien mittels der Funktion drupal_add_js() vorgestellt. Mittels dieser Funktion ist jedoch auch eine direkte Einbindung von JavaScript-Befehlen möglich, was erneut in der Funktion phptemplate_preprocess_page() in der template.php (über der Zeile mit dem drupal_get_js-Aufruf) geschieht.
drupal_add_js(
'alert("test");',
'inline'
);
Hierzu übergibt man als zweiten Parameter anstatt des Strings theme nun die Angabe inline. Als ersten Parameter übergibt man, wie im Beispiel gezeigt, die JavaScript-Befehle als String.
Achtung: Wichtig ist hierbei die korrekte Verwendung von Anführungszeichen. Wird wie im Beispiel der String von einfachen Anführungszeichen umschlossen, so darf man für JavaScript nur noch die Gänsefüsschen benutzen.
Da der JavaScript-Code jedoch nicht direkt an der Stelle der Einbindung im HTML-Code ausgeführt werden soll, sondern nachdem die Seite geladen wurde (normalerweise onload-Event-Handler auf dem Body-Tag), führte ich meine Recherche fort. Hierbei half mir ein Beitrag, den ich schon im Rahmen meines letzten Artikels gefunden hatte, aber nicht komplett gelesen hatte.
drupal_add_js(
'Drupal.behaviors.meinThemeName = function(context) {
alert("test");
};',
'inline'
);
Achtung: Auch hier muss man auf die korrekte Verwendung der Anführungszeichen achten. Der fettmarkierte Teil kann beliebig benannt werden, muss jedoch eindeutig sein, weswegen ich beispielsweise meinThemeName oder eine ähnliche Schreibweise empfehlen würde.
Nach den Erläuterungen von aj045 würde ich vermuten, daß diese Variante als Ersatz für einen onload-Event-Handler auf dem Body-Tag gelten kann. Im Gegensatz zu seinem zweiten Beispiel (im obig verlinkten Kommentar) benötigte ich zudem noch eine Möglichkeit auf Größen-Änderungen des Browserfensters zu reagieren und hierbei Funktionsparameter zu übergeben. Ich habe mich deswegen für nachfolgende Variante entschieden:
drupal_add_js(
'Drupal.behaviors.meinThemeName = function(context) {
$(window).resize(function() {
alert("test");
});
};',
'inline'
);
Hierbei wird mittels jQuery an das Window-Objekt ein resize-Handler gebunden, durch den dann wiederum alle JavaScript-Befehle in der inneren Funktion aufgerufen werden.
Fazit
Im Gegensatz zu direkten Event-Handlern auf dem Body-Tag wird eine Menge Code benötigt, dafür ist dann jedoch die ganze Magie im Hintergrund versteckt. Neben Drupal.behaviors gibt es übrigends noch weitere nette Spielereien, die ich aber bisher noch nicht benötigt bzw. genutzt habe.
Kommentar hinzufügen