Eigene Skripte und iFrames in Content Management Systemen verwenden

Jeder, der sich schon intensiv mit Webentwicklung beschäftigt hat, weiß, wie wichtig eigene Skripte und Stylesheets für eine Webseite sind, um deren Funktionalität und Design individuell an die eigenen Vorstellungen anzupassen. Bei der klassischen Webentwicklung werden die Quelldateien manuell bearbeitet. Daher kann man in diesem Fall Skripte und Stylesheets einfach hinzufügen oder ändern.

Anders ist das bei Verwenden eines Content Management Systems. Bei einem CMS, wie etwa Squarespace, muss anders vorgegangen werden. Squarespace [1] bietet von Haus aus leider keine Möglichkeit, um ganze Skripte hochzuladen (Stand: August 2020). Es können lediglich kleinere Skript-Blöcke direkt in Webseiten eingefügt werden.

Im Folgenden wird ein Workaround vorgestellt, mit dem Skripte oder Stylesheets in die eigene Squarespace-Webseite integriert werden können. Es basiert im Wesentlichen auf der Idee, dass Skripte und Stylesheets Dateien sind, die – genau wie Bilder oder Videos – auf die Webseite hochgeladen werden können.

  • Erstellen einer neuen Seite mit aussagekräftigem Namen (bspw.: „ScriptAndStyles“). Diese Seite ist nur ein Platzhalter und sollte daher nicht öffentlich zugänglich sein. Dazu kann sie einfach über die Seiteneinstellungen deaktiviert werden.

  • Hinzufügen eines Textblocks und Einfügen eines Links. In den Link-Einstellungen „Datei“ auswählen, das gewünschte Skript hochladen und einen aussagekräftigen Link-Namen wählen:

 
Schritt 2.PNG
 

Dieser Vorgang kann für jede hochzuladende Datei wiederholt werden. Die hochgeladenen Dateien liegen dann unter „/s/dateiname.endung“. Im obigen Beispiel wurden die drei Dateien chatbot_style.css, chatbot_script.js und bot_avatar.png hochgeladen.

  • Zuletzt die Seite auswählen, auf der das Skript bzw. das Stylesheet verwendet werden soll. Anschließend folgenden Text unter „Seiteneinstellungen > Erweitert“ einfügen, um die Dateien mit der gewählten Seite zu verknüpfen (Das ist auf Squarespace ein Premium-Feature, also kostenpflichtig!):

Schritt 5.PNG
 
Schritt 3.PNG
 

Damit wurden die Skripte und Stylesheets erfolgreich der Webseite hinzugefügt und können dort verwendet werden. Dieses Verfahren ist angepasst auf das CMS Squarespace. Andere Content Management Systeme können vom Vorgang abweichen.

Sidenote zu iFrames und Squarespace

iFrames [2] sind in der Webentwicklung ein geeignetes Mittel, um (externe) Webseiten auf der eigenen Webseite einzubinden. Auch auf Squarespace-Seiten können solche Elemente eingefügt werden. Dazu muss lediglich ein Code-Block erstellt und der folgende Code eingefügt werden (Bitte beachten Sie auch hier, dass es sich dabei um ein Premium-Feature auf Squarespace handelt und damit kostenpflichtig ist!):

Schritt 4.PNG

Während iFrames, welche Inhalte von Webseiten der gleichen Domäne anzeigen, problemlos in Squarespace integriert werden können, müssen bei externen Inhalten (andere Domäne) einige Dinge beachtet werden:

  • Sofern die eingebundene Webseite von einer externen Domäne stammt, verhält sich diese im iFrame unter Umständen nicht wie erwartet. Ein Beispiel hierfür sind php-Formulare und Cookies: der Betreiber der externen Webseite muss deren Verwendung von externen Quellen explizit zulassen, indem er den Access-Control-Allow-Origin-Header [3] seines Webservers setzt.

  • Zudem sollten Sie iFrames nach der Integration in Ihre Webseite in allen gängigen Browsern testen, da unterschiedliche Browser iFrames unterschiedlich handhaben. So können Sie sicherstellen, dass alle Funktionalitäten gewährleistet sind und falls nötig browserspezifische Anpassungen vornehmen. 

[1] https://de.squarespace.com/
[2] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe
[3] https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

AllgemeinChristoph WielandContent Management System, CMS, Squarespace, JavaScript, CSS, Stylesheet, Skript, Workaround, iFrame