Javascript iFrames Erkennen
Kategorie:
Veröffentlicht: 07.08.2019
Dein Netzwerk ist offline, deshalb laden wir die gesamte Seite aus dem Cache. Beachte: die Inhalte könnten veraltet sein! Für aktuelle Inhalte aktiviere bitte dein Internet.
Hallo liebe Nutzer,
da wir als Coding-Plattform und Webentwickler ausschließlich auf aktuelle Technologien setzen, unterstützen wir keine veralteten Internetbrowser. Bitte schau dir doch ein paar der tollen Alternativen an, bestimmt findest du hier einen für dich passenden modernen Browser!

Benachrichtigungen

Bleib immer mit aktuellen Informationen auf dem Laufenden, dein Browser informiert dich über neue Artikel und wichtige Hinweise von uns!

iFrame durch Javascript erkennen lassen

Inhaltsverzeichnis
[[TABLE OF CONTENTS]]

In diesem kurzen Tutorial erkläre ich euch, wie ihr erkennen lassen könnt mit Javascript, ob eure Webseite mit in einem Iframe geöffnet wurde.

Wofür ist das erkennen von einem iFrame Nützlich?

  • Hinweise anzeigen, wenn Seiten durch iFrames "kopiert" werden sollen.
  • Zum Beispiel habt ihr ein live Code Beispiel in einer eurer Webseiten, aber wollt diese auch als eigene Seite gut dargestellt haben. Im iFrame benötigt ihr keine Navigation, aber wird der Iframe so geöffnet, dann braucht ihr wieder diese Navigation.

Funktion und Erklärung

function isiFrame () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

window.top ist das höchste Fenster was es gibt. Es gibt keine Fenster, welche höher sind. Dann haben wir noch die window.self Eigenschaft - diese gibt das Fenster selbst aus.

Wenn nun das höchste Fenster nicht dem Fenster selbst entspricht, ist das aktuelle Fenster in einem iFrame geöffnet. Ist das höchste Fenster gleich dem Fenster selbst ist es kein iFrame.

Anwendungsbeispiel

Hier habe ich euch einmal ein Beispiel erstellt, an dem ihr die Funktionalität noch einmal sehen könnt. Ihr könnt den unten stehenden Link öffnen, dann könnt ihr entsprechend die andere Meldung Rot hinterlegt sehen.

<div id="notOpenInFrame">
  <p>If page is not open, open in iframe</p>
</div>

<div id="openInframe">
  <p>If page is open, open in iframe</p>
</div>
function isiFrame() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

if(isiFrame()){
  document.getElementById('openInframe').style.background = 'red';
}else{
    document.getElementById('notOpenInFrame').style.background = 'red';
}

Live Code inhalte sind oft nicht auf Mobil Geräte Optimiert da diese nur Bestimte Szenarien auf zeigen soll. Falls die Anzeige auf deinen Mobilgeräte nicht tadelos Funktionieren sollte öffne die Seite bitte auf einem Desktop Geräte.

Habt ihr Fragen Feedback oder Anregungen? Dann hinterlasst doch gerne eine Kommentar.

Kommentare

Es sind noch keine Kommentare vorhanden? Sei der Erste und schreib ein Kommentare zum Artikel "Javascript iFrames Erkennen".

Kommentar Schreiben:

Home Menü Suche
X