Lerne Coding
Javascript iFrames Erkennen

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>Seite ist nicht in einem iFrame Geöffnet</p>
</div>

<div id="openInframe">
  <p>Seite ist in einem iFrame Geöffnet</p>
</div>
function isiFrame() {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

if(isiFrame()){
    document.getElementById('openInframe').style.background = '#eb4034';
    document.getElementById('openInframe').style.color = '#fff';
}else{
    document.getElementById('notOpenInFrame').style.background = '#eb4034';
    document.getElementById('notOpenInFrame').style.color = '#fff';
}
Kommentare zum Artikel

Es sind noch keine Kommentare vorhanden? Sei der/die Erste und verfasse einen Kommentar zum Artikel "Javascript iFrames Erkennen "!

Kommentar schreiben

Verwante Beiträge
close