Javascript oder die Javascript Library jQuery, lassen sich mit vordefinierten TypoScript Funktionen recht einfach in das TYPO3 Page Objekt integrieren. Es gibt dafür verschiedene Möglichkeiten, für die Position im Quelltext, in der JS Dateien eingebunden werden. Die TypoScript Funktionen includeJS, includeJSLibs und jsInline, binden Javascript Dateien oder JS Quellcode im <head> Bereich des HTML Dokuments ein. Die Einbindung von Javascript Code am Ende des HTML Dokuments, vor dem schließenden </body> Tag, wird mit den TypoScript Funktionen: includeJSFooter, includeJSFooterlibs und jsFooterInline erreicht. Möchte man erreichen, das der gesamte Javascript Code im Footer eingebunden wird, kann die TypoScript "moveJsFromHeaderToFooter" genutz werden.
page.includeJS {
// relativer Dateipfad zur Javascript / jQuery Datei
file_01 = fileadmin/jquery-init.js
// Weitere Konfigurationen zur Einbindung, für die Javascript oder jQuery Datei
file_01 {
// Angabe zum MIME Typ der Javascript oder jQuery Datei (Standard: text/javascript)
type = application/x-javascript
// Diese Javascript oder jQuery Datei an erster Stelle laden 0 / 1
forceOnTop = 1
// Javascript oder jQuery Datei von der Kompression ausschließen
// TypoScript: config.compressJs
disableCompression = 1
// Die Javascript oder jQuery Datei von der Zusammenfügen mit anderen Dateien ausschließen
// TypoScript: config.concatenateJs
excludeFromConcatenation = 1
}
// Eine weitere Javascript oder jQuery Datei
// unter Verwendung einer if else Bedingung einbinden
file_02 = fileadmn/form-check.js
file_02 {
// JS Datei beim Aufruf der Formular-Seite mit der ID 4
if {
// Seiten ID
value = 4
equals.data = TSFE:id
}
}
// Externer Javascript Dateien einbinden
file_03 = http : // www . seite . tdl / js / share.js
file_03 {
// Der external Parameter ermöglicht die Einbindung der JS Datei
// ohne Prüfung, ob diese existiert
external = 1
}
// weitere Javascript Dateien einbinden
file_04 = ...
}Die aufgeführten Parameter für die gezeigte TypoScript Funktion "includeJS", gelten auch für die Funktionen: includeJSLibs, includeJSFooter und includeJSFooterlibs. Die "Libs" werden dabei vorrangig behandelt und zuerst geladen.
Ab dem Einsatz der TYPO3 Version 7.1, gibt es einen weiteren Paramter "async", der die Einbindung von Javascript Dateien asynchron durchführt.
page.includeJSFooterlibs {
// JavaScript-Dateien asynchron nachladen (ab TYPO3 7.1)
file_01 = https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
file_01 {
async = 1
external = 1
disableCompression = 1
excludeFromConcatenation = 1
}
}Ein weitere effektive Variante, um z.B. die Javascript Library jQuery einzubinden, kann mit der Typoscript Funktion "javascriptLibs" umgesetzt werden.
page.javascriptLibs {
# Include von jQuery
jQuery = 1
# Welche Version? (mögliche Werte: latest|1.12.0|…, Standard: latest)
# Hinweis: falls jQuery.source aus einem CDN wie "google" kommt
# muss der Parameter jQuery.version auf "latest" stehen
jQuery.version = latest
# lokaler Include oder von verschiednen CDNs (mögliche Werte: local|google|jquery|msn, Standard: local)
jQuery.source = local
# jQuery Conflict Mode
jQuery.noConflict = 1
# Bei aktivem noConflict Mode
# jQuery mit "TYPO3.###NAMESPACE###(…);" benutzen # (string, Standard: jQuery)
jQuery.noConflict.namespace = myNamespace
}Wer wissen möchte, wie sich in TYPO3 CSS Dateien integrieren lassen, kann sich auf der Seite "CSS Dateien einbinden", schlau machen.
