Javascript iFrames Erkennen
Netzwerk Offline
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!
Alter Browser
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!

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';
}
keyboard_arrow_up
Home Men├╝ Suche
close