Text einer Webseite ausblenden, wenn diese in einem Iframe angezeigt wird

Clemens-XS

Ich möchte eine Webseite, die ein Video zeigt und Text beinhaltet, so in einem Iframe darstellen, dass der text nicht angezeigt wird. Wird die Webseite ohne Iframe ganz normal angezeigt, soll der Text gezeigt werden. Hierfür fand ich folgende Lösung, die aber leider doch aus irgend einem Grund bis jetzt nicht funktioniert:

Die Website bekommt ein Javascript mit:

Code

<script>
  if (window.self !== window.top) {
    // Die Seite wird in einem Iframe angezeigt
    document.documentElement.classList.add('is-in-iframe');
  }
</script>

Dieses erkennt, wenn die Webseite in einem Iframe läuft und setzt dann die CSS Klasse "is-in-iframe".

Die Webseite erhält auch ein CSS:

CSS

/* Standard-Ansicht (Seite wird direkt aufgerufen) */
.mein-text {
  display: block;
}

/* Iframe-Ansicht: Element ausblenden */
.is-in-iframe .mein-text {
  display: none !important;
}

Und dem auszublendenden Text weise ich mit <div class="mein-text"> die per Script auszublendende Klasse zu.

Resultat: Leider wird im Iframe immer noch der Text angezeigt.

Die Überprüfung des HTML im Iframe ergab, dass das Script ordnungsgemäß im Headbereich geladen ist und auch, dass dem Textblock die CSS-Klasse korrekt zugewiesen wird. Es ist auch sicher, dass diese Klassenbezeichnung nirgends sonst benutzt wird und dass mit dem o.g. Script kein anderes Script kollidiert.

Woran kann et denn liejen, dat et nit jeht?

Clemens-XS

Jetz weiß ich, woran et jelejen hat.

Ich hatte den Text im Text-Element mit der Klasse .mein-text ausgezeichnet. Aber in YooTheme steht der Text in einem Text-Element. Und dieses Element wurde ja nicht ausgeblendet. Und damit war anscheinend das "display: none;" innerhalb des Iframe wirkungslos.

Ich habe daher die Klasse .el-element, die sich auf das gesamte Text-Element bezieht im CSS eingefügt und damit .mein-text ersetzt.

Und schwupp, schon funktioniert et!

Tags