Responsive Device Switcher oder Add CSS/JS funktioniert nicht
Inhaltsverzeichnis
So erkennst du den Fehler
Wenn du deine Webseite responsiv anzeigen und bearbeiten möchtest oder du CSS/JavaScript in deiner Variante hinzufügen möchtest , aber deine Webseite dabei nicht lädt und einen Fehler anzeigt, dann liegt es an den Framing Einschränkungen.
So behebst du den Fehler
Lösung 1: Nutzung der Varify.io® Chrome Extension
Damit du deine Varianten trotzdem anlegen kannst, hast du die Möglichkeit, diese Framing Einschränkung mit der Varify.io® Chrome Extension zu umgehen.
- Downloade die Varify® Chrome Extension
- Aktiviere sie in deinem Browser und hinterlege dein Varify® Code Snippet
- Aktiviere den Schalter “Allow Responsive Device Switcher”
- Lade die Seite erneut – Fertig!
Nun sollte alles wie erwartet funktionieren.
Eine ausführlichere Erklärung zur Installation und Aktivierung, sowie weiteren Funktionen findest du hier: Varify® Chrome Browser-Erweiterung
Lösung 2: Anpassung der X-Frame-Options auf der eigenen Webseite
Wenn du eine Fehlermeldung wie im obigen Screenshot siehst, kann die Seite aufgrund einer Framing-Beschränkung nicht im responsiven Device Switcher laden.
Die normale Desktop-Ansicht des visuellen Editors ist von den Einschränkungen des Frames nicht betroffen.
Wenn deine Seite mit dem Response-Header X-Frame-Options mit dem Wert “deny” ausgeliefert wird, kann die responsive Bearbeitung nicht genutzt werden.
Eine sinnvolle Lösung wäre in diesem Fall, die Einschränkung auf X-Frame-Options: “sameorigin” zu lockern.
X-Frame-Optionen: “sameorigin” erlaubt die Einbettung deiner Seiten in einen Frame von deiner Domain, aber nicht die Einbettung in andere Webseiten.