Zum Hauptinhalt springen

Responsive Device Switcher oder Add CSS/JS funktioniert nicht

Zuletzt aktualisiert am 22. Apr. 20261 Min. Lesezeit
Inhaltsverzeichnis

So erkennst du den Fehler​

Wenn du deine Website responsiv anzeigen und bearbeiten oder CSS/JavaScript in deiner Variante hinzufügen möchtest, deine Website aber nicht lädt und einen Fehler anzeigt, liegt das an den Framing-Beschränkungen.

Varify-Editor im responsiven Modus mit einer verweigerten Verbindung; die Konsole meldet, dass der Frame aufgrund von „X-Frame-Options: deny“ verweigert wurde Varify-Dialog „Add JS“, dessen Codefeld leer bleibt und „This content is blocked. Contact the site owner to fix the issue.“ meldet

So behebst du den Fehler​

Lösung 1: Mit der Varify.io®-Chrome-Erweiterung​

Damit du deine Varianten trotzdem erstellen kannst, hast du die Möglichkeit, diese Framing-Beschränkung mit der Varify.io®-Chrome-Erweiterung zu umgehen.

  1. Lade die Varify® Chrome-Erweiterung herunter
  2. Aktiviere sie in deinem Browser und speichere deinen Varify®-Code-Snippet
  3. Aktiviere den Schalter „Allow Responsive Device Switcher“
  4. Lade die Seite neu - Fertig!

Jetzt sollte alles wie erwartet funktionieren.

Eine ausführlichere Erklärung zur Installation und Aktivierung sowie zu weiteren Funktionen findest du hier: Varify® Chrome-Browser-Erweiterung

Varify-Editor mit ausgeschaltetem Device Switcher, der eine leere Seite zeigt, und mit eingeschaltetem Device Switcher, der die gerenderte Seite zeigt

Lösung 2: Anpassen der X-Frame-Optionen auf deiner eigenen Website​

Wenn du eine Fehlermeldung wie im Screenshot oben siehst, verhindert eine Framing-Beschränkung, dass die Seite im responsiven Geräte-Umschalter geladen werden kann.

Die normale Desktop-Ansicht des Visual Editors ist von Framing-Beschränkungen nicht betroffen.

Wenn deine Seite mit dem Response-Header X-Frame-Options und dem Wert "deny" ausgeliefert wird, kann responsives Editieren nicht verwendet werden.

Eine sinnvolle Lösung wäre in diesem Fall, die Beschränkung auf X-Frame-Options: "sameorigin" zu lockern.

X-Frame-Options: "sameorigin" erlaubt es, deine Seiten in einem Frame von deiner Domain einzubetten, erlaubt dies aber nicht von anderen Websites aus.

Auf dieser Seite