Wie lässt sich feststellen, ob eine Webseite innerhalb eines Iframe oder direkt in das Browserfenster geladen wird?

Question

Ich schreibe eine iframe-basierte Facebook-App. Nun möchte ich dieselbe HTML-Seite verwenden, um die normale Website sowie die Canvas-Seite innerhalb von Facebook darzustellen. Ich möchte wissen, ob ich feststellen kann, ob die Seite innerhalb des iframe oder direkt im Browser geladen wurde?

Answer 1

Browser können den Zugriff auf window.top aufgrund von Politik des gleichen Ursprungs . IE-Fehler treten ebenfalls auf. Hier ist der Arbeitscode:

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

top y self sind beide window Objekte (zusammen mit parent ), so dass Sie sehen, ob Ihr Fenster das oberste Fenster ist.

Answer 2

Wenn in einem iframe mit demselben Ursprung wie der übergeordnete Rahmen, wird die window.frameElement Methode gibt das Element zurück (z.B. iframe o object ), in die das Fenster eingebettet ist. Andernfalls, wenn in einem Top-Level-Kontext geblättert wird oder wenn der übergeordnete und der untergeordnete Rahmen unterschiedliche Ursprünge haben, wird es ausgewertet zu null .

window.frameElement
  ? 'embedded in iframe or object'
  : 'not embedded or cross-origin'

Dies ist ein HTML-Standard mit grundlegender Unterstützung in allen modernen Browsern.

Answer 3

if ( window !== window.parent ) 
{
      // The page is in an iframe   
} 
else 
{     
      // The page is not in an iframe   
}

Answer 4

Ich bin mir nicht sicher, wie dieses Beispiel für ältere Webbrowser funktioniert, aber ich verwende es für IE, Firefox und Chrome ohne Probleme:

var iFrameDetection = (window === window.parent) ? false : true;

Answer 5

RoBorg hat Recht, aber ich möchte eine Randbemerkung hinzufügen.

In IE7/IE8, als Microsoft Tabs zu ihrem Browser hinzufügte, haben sie eine Sache kaputt gemacht, die Chaos mit Ihrem JS verursachen wird, wenn Sie nicht vorsichtig sind.

Stellen Sie sich dieses Seitenlayout vor:

MainPage.html
  IframedPage1.html   (named "foo")
  IframedPage2.html   (named "bar")
    IframedPage3.html (named "baz")

Wenn Sie jetzt im Rahmen "baz" auf einen Link klicken (kein Ziel, wird im Rahmen "baz" geladen), funktioniert er einwandfrei.

Wenn die geladene Seite, nennen wir sie special.html, JS verwendet, um zu prüfen, ob "it" einen übergeordneten Rahmen namens "bar" hat, wird "true" zurückgegeben (erwartet).

Nehmen wir nun an, dass die Seite special.html beim Laden den übergeordneten Rahmen auf Existenz und Name überprüft, und wenn es "bar" ist, lädt sie sich im Rahmen der Bar neu. z.B.

if(window.parent && window.parent.name == 'bar'){
  window.parent.location = self.location;
}

So weit, so gut. Jetzt kommt der Fehler.

Angenommen, Sie klicken nicht wie üblich auf den ursprünglichen Link und laden die Seite special.html im "baz"-Frame, sondern klicken mit der mittleren Maustaste darauf oder öffnen sie in einer neuen Registerkarte.

Wenn diese neue Registerkarte geladen wird ( und zwar ganz ohne Elternrahmen! ) Der IE wird in eine Endlosschleife des Seitenladens eintreten! weil der IE die Rahmenstruktur in JavaScript "kopiert", so dass die neue Registerkarte ein übergeordnetes Element hat, und dieses übergeordnete Element hat den Namen "bar".

Die gute Nachricht ist, dass die Überprüfung:

if(self == top){
  //this returns true!
}

in dieser neuen Registerkarte gibt true zurück, und so können Sie auf diese seltsame Bedingung testen.