externe Datei mit Javascript Code einbinden

**Robby1** · 16.06.2018, 22:09

Hallo Zusammen,

es gab schon viele Forumbeiträge zum Thema "Javascript einbinden", aber irgendwie haben sie mir nicht komplett geholfen. Ich habe zwei Fragen hierzu:

1.
Ich habe einen Forumbeitrag befolgt und meine externe Javascript-Datei in "dateiname.php" umbenannt, im Templates-Ordner gespeichert und dann mit einem html-Inhaltselement und dem folgenden Eintrag eingebunden: {{file::dateiname.php}}. Das funktioniert auch problemlos.
Was ich bisher nie verstanden habe ist, warum es nicht ohne Umwege funkioniert (auch wenn manchmal davon abgeraten wird, wegen dem <script>-Tag), und zwar: Javascript-Datei in den Files-Ordner kopieren und die externe Javascript-Datei ganz normal im Seitenlayout unter "zusätzliche <head>-Tags" mit dem Eintrag <script src="dateiname.js"></script> einbinden / bekannt geben. Was ist daran falsch?
(PS: in den Einstellungen unter "erlaubte html-Tags" habe ich <script> auch eingetragen)

2.
Ich würde mir gerne einige Javascript-Funktionen in einer externen Datei ablegen (quasi als kleine Javascript-Bibliothek) und diese Datei im Files-Ordner ablegen und im Seitanlayout unter "zusätzliche <head>-Tags" mit dem Eintrag <script src="meineFunktionen.js"></script> einbinden (wie in Pkt 1 beschrieben). Das ist wohl deswegen notwendig, da die Inhalte in dieser Datei nicht mit <script> beginnen, sondern alle mit "function meineFunktion()". Weil in dem Code das <script>-Tag fehlt (da es ja nur Funktionen sind), kann ich sie wohl nicht im html-Inhaltselement einfügen und wollte das Ganze halt in einer externen Datei ablegen.
Daher interessiert mich wie ich im Seitanlayout unter "zusätzliche <head>-Tags" mit dem Eintrag <script src="meineFunktionen.js"></script> eine externe Datei einbinden kann (siehe Frage 1). Bei mir klappt das irgendwie nie.

Auch wenn es andere Möglichkeiten gibt, eigene JS-Funktionen einzubinden, würde ich trotzdem gerne endlich mal verstehen, wie man externe JS-Dateien über einen Eintrag im Seitenlayout unter "zusätzliche <head>-Tags" einbinden kann. Das muss doch gehen, oder?

Hat jemand ein oder zwei Tipps für mich? ES WÜRDE MICH SEHR FREUEN!

Viele Grüße aus Hanau (Hessen)!

Robby

**07alex07** · 16.06.2018, 22:17

Erstell die eine Datei zb. script.js mit deinem Inhalt. Die Datei lädst du in das files Verzeichnis und bindest es im Layout unter zusätzliche Head ein.

Wenn es irgendwelche Fehler auftreten so poste die Fehler dann hier bzw. ein Link zur Seite.

**Robby1** · 17.06.2018, 12:07

Hallo 07alex07,

Danke für die schnelle Reaktion. Ich habe es vor und nach meinem Post genau so gemacht. Ich habe es mit <script src="dateiname.js"></script> und auch vorsichtshalber mit <script src="files/dateiname.js"></script> im Seitenlayout unter "zusätzliche <head>-Tags" probiert. Es passiert einfach nichts. Ich kann auch gerne einen Link schicken, aber es bringt nicht viel, da einfach nichts passiert.
Mein einfacher Testcode scheint in Ordnung zu sein, da es mit der Methode (JS-Datei in "dateiname.php" umbenennen, im Templates-Ordner speichern und mit einem html-Inhaltselement mit {{file::dateiname.php}}) funktioniert. So viel kann man da eigentlich nicht falsch machen, trotzdem funktioniert es nicht. Ich test mal weiter, wenn mir etwas einfällt.

Grüße! Robby

**07alex07** · 17.06.2018, 22:27

ja erhältst du bei der anderen Variante eine Fehlermeldung in der Console?

**Franko** · 18.06.2018, 08:22

Im Seitenlayout unter "Eigener JavaScript-Code" o. "Zusätzliche <head>-Tags" kannst Du eintragen was Du möchtest - es wird einfach an der Stelle eingetragen (und es muß auch kein <script> Tag erlaubt werden). Was Dein Script dann macht bleibt ja Dir überlassen. Überprüfe einfach ob Dein Eintrag im Quellcode steht ... z.B:

Code:

<script src="files/samples/xyz.js"></script>
<script>
(function ($) {
	var test1 = '';
	
})(jQuery);
</script>
<style>body{ background: red; }</style>

Alternativ a) in jedem beliebigen Template über:

Code:

<?php
  $GLOBALS['TL_JAVASCRIPT'][] = 'files/samples/xyz.js|static';
  $GLOBALS['TL_CSS'][]        = 'files/samples/xyz.css|static';
?>

Alternativ b) im Template Verzeichnis ein j_xyz.html5 (für jquery scripts) anlegen und im Seitenlayout einbinden/aktivieren
Alternativ c) im Template Verzeichnis ein js_xyz.html5 (für native scripts) anlegen und im Seitenlayout einbinden/aktivieren (ich glaube ab Contao 4.x)

Alternativ d) in einem bel. template über den Combiner:

Code:

<?php

  $combinedJS = new Combiner(); 
  $combinedJS->add('files/samples/xyz_1.js'); 
  $combinedJS->add('files/samples/xyz_2.js'); 

  // so
  $GLOBALS['TL_HEAD'][] = '<script src="'.$combinedJS->getCombinedFile().'"></script>';  
  
  // oder so
  //$GLOBALS['TL_BODY'][] = '<script src="'.$combinedJS->getCombinedFile().'"></script>';  
  
  // oder so
  //$GLOBALS['TL_JAVASCRIPT'][] = $combinedJS->getCombinedFile();  

?>

s.a.: https://docs.contao.org/books/api/ex...binedFile.html

**Robby1** · 19.06.2018, 21:02

Hallo Zusammen,

vielen lieben Dank an die Contao-Gemeinde für die Tipps und die Hilfe. Durch Eure Infos kam ich zum Nachdenken und habe den Fehler entdeckt.
Das Problem war, dass sich die Kodierung meines Notepad++ verstellt hat. Sie war nicht mehr auf UTF-8. Dann habe ich zusätzlich noch blöderweise den Code zunächst im Browser lokal getest und die script-Tags leider auch mit in die spätere externe Datei kopiert. Das hat Contao natürlich nicht akzeptiert.

Also vielen lieben Dank nochmal und Gruß aus Hanau!

Robby