Wie zu erkennen, ob eine Webseite in einem Iframe geladen wird oder direkt in die Browser-Fenster?

RoBorg ist richtig, aber ich wollte eine Randnotiz hinzuzufügen.

In IE7 / IE8, wenn Microsoft hinzugefügt Tabs, um ihren Browser sie eine Sache brach, die Verwüstung mit Ihrem JS verursacht, wenn Sie nicht vorsichtig sind.

Stellen Sie sich dieses Seitenlayout:

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

Jetzt in frame „baz“ klicken Sie auf einen Link (kein Ziel, Ladungen in der „baz“ frame) es funktioniert gut.

Wenn die Seite, die geladen wird, läßt es nennen special.html verwendet JS zu überprüfen, ob „es“ einen übergeordneten Rahmen hat den Namen „Bar“ es wahr zurück (erwartet).

Jetzt können sagen, dass die special.html Seite, wenn es geladen wird, überprüft den übergeordneten Frame (für Existenz und seinen Namen, und wenn es „bar“ es lädt sich in der Bar Rahmen, z. B.

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

So weit, ist es gut. Jetzt kommt der Fehler.

Nehmen wir stattdessen auf die Original-Link wie normale klicken, und die special.html Seite in der „baz“ frame Laden Sie mittleren angeklickt haben oder wählte es in einem neuen Tab zu öffnen.

Wenn dass neue Registerkarte Lasten ( ohne übergeordneten Rahmen überhaupt! ) IE wird eine Endlosschleife der Ladung der Seite eingeben! weil IE „Kopien über“ die Rahmenstruktur in JavaScript , so dass die neuen Registerkarte einen Elternteil haben, und dass Eltern haben den Namen „bar“.

Die gute Nachricht ist, dass Überprüfung:

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

in dieser neuen Tab zurückkehrt wahr, und daher kann man für diese seltsame Bedingung testen.

Da Sie im Rahmen einer Facebook-App fragen, möchten Sie vielleicht Nachweis dieser auf dem Server zu berücksichtigen, wenn der ursprüngliche Antrag gestellt wird. Facebook wird entlang einer Reihe von Abfragezeichendaten einschließlich der fb_sig_user Schlüssel übergeben, wenn sie von einem Iframe aufgerufen wird.

Da Sie wahrscheinlich diese Daten ohnehin in Ihrer Anwendung überprüfen und verwenden müssen, verwenden sie die den entsprechenden Kontext zu machen, um zu bestimmen.

Verwenden Sie diese Javascript-Funktion als Beispiel dafür, wie dies zu erreichen.

function isNoIframeOrIframeInMyHost() {
// Validation: it must be loaded as the top page, or if it is loaded in an iframe 
// then it must be embedded in my own domain.
// Info: IF top.location.href is not accessible THEN it is embedded in an iframe 
// and the domains are different.
var myresult = true;
try {
    var tophref = top.location.href;
    var tophostname = top.location.hostname.toString();
    var myhref = location.href;
    if (tophref === myhref) {
        myresult = true;
    } else if (tophostname !== "www.yourdomain.com") {
        myresult = false;
    }
} catch (error) { 
  // error is a permission error that top.location.href is not accessible 
  // (which means parent domain <> iframe domain)!
    myresult = false;
}
return myresult;
}

Die akzeptierte Antwort nicht innerhalb des Content-Skript eines Firefox 6.0 Extension (Addon-SDK 1.0) für mich arbeiten: Firefox führt das Content-Skript in jedem: das Fenster der obersten Ebene und in allen iframes.

Im Innern der Content-Skript bekomme ich die folgenden Ergebnisse:

 (window !== window.top) : false 
 (window.self !== window.top) : true

Das Merkwürdige an dieser Ausgabe ist, dass es immer gleich, egal, ob der Code in einem Iframe oder das Fenster der obersten Ebene ausgeführt wird.

Auf der anderen Seite Google Chrome scheint nur einmal meine Content-Skript auszuführen, im Fenster der obersten Ebene, so würde die oben nicht funktionieren.

Was schließlich arbeitete für mich in einem Content-Skript in beiden Browsern ist dies:

 console.log(window.frames.length + ':' + parent.frames.length);

Ohne iframes diese Drucke 0:0, in einem Top-Level - Fenster mit einem Rahmen druckt 1:1, und in dem nur iframe eines Dokuments druckt 0:1.

Dies ermöglicht es meine Erweiterung in beiden Browsern, um zu bestimmen, ob es irgendwelche Iframes vorhanden ist, und zusätzlich in Firefox, wenn es in einen des iframes laufen.

Es ist ein altes Stück Code, das ich ein paar Mal benutzt habe:

if (parent.location.href == self.location.href) {
    window.location.href = 'https://www.facebook.com/pagename?v=app_1357902468';
}

Ich verwende diese:

var isIframe = (self.frameElement && (self.frameElement+"").indexOf("HTMLIFrameElement") > -1);

if (window.frames.length != parent.frames.length) { page loaded in iframe }

Aber nur, wenn Anzahl der Iframes auf Ihrer Seite unterscheidet und Seite, die geladen werden Sie in iframe. Machen Sie keinen iframe in Ihre Seite ein 100% Garantie Ergebnis dieses Codes haben

Notieren Sie sich diese Javascript in jeder Seite

if (self == top)
  { window.location = "Home.aspx"; }

Dann wird es leitet automatisch zur Homepage.

Wenn Sie wissen wollen, ob der Benutzer die App von Facebook-Seite Registerkarte oder Leinwand Prüfung für die Unterzeichnung Anforderung zugreift. Wenn Sie es nicht erhalten, wahrscheinlich wird der Benutzer Zugriff auf nicht von Facebook. Um sicherzustellen, bestätigen die signed_request Felder Struktur und Felder Inhalt.

Mit der PHP-sdk können Sie den unterschriebenen Antrag wie folgt erhalten:

$signed_request = $facebook->getSignedRequest();

Sie können hier mehr über Signed anfordern lesen:

https://developers.facebook.com/docs/reference/php/facebook-getSignedRequest/

und hier:

https://developers.facebook.com/docs/reference/login/signed-request/

window.frameElementGibt das Element (zB <iframe> oder <object>), in dem das Fenster eingebettet ist, oder null, wenn das Fenster der oberste Ebene ist. So identifizieren Code wie folgt aussieht

if (window.frameElement) {
  // in frame
}
else {
  // not in frame
}

Dies ist Standard und eher neue Methode. Es funktioniert genau in Chrome und Firefox. Ich kann es als Universallösung nicht empfehlen , aber es sollte hier erwähnt werden , denke ich.

Früher habe ich tatsächlich window.parent überprüfen und es funktionierte für mich, aber in letzter Zeit-Fenster ist ein zyklisches Objekt und hat immer einen übergeordneten Schlüssel, iframe oder keine iframe.

Da die Kommentare mit window.parent arbeitet hart schlagen zu vergleichen. Nicht sicher, ob dies funktionieren wird, wenn Iframe genau die gleiche Webseite als Elternteil ist.

window === window.parent;

Ich bin mir nicht sicher, wie dieses Beispiel für älteren Web-Browser funktioniert, aber ich benutze diese für IE, Firefox und Chrome ohne und Ausgabe:

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

Best-for-jetzt für älteren Browser-Rahmen brechend Script

Die anderen Lösungen nicht für mich gearbeitet. Dies funktioniert auf allen Browsern:

Eine Möglichkeit, gegen Clickjacking zu verteidigen, ist zu schließen ein „Rahmen-breaker“ Skript in jeder Seite, die nicht gerahmt werden soll. Die folgende Methode wird eine Webseite verhindern, dass auch in älterem Browser eingerahmt wird, die nicht das X-Frame-Options-Header-Unterstützung.

In dem Dokument HEAD-Element, fügen Sie die folgenden Schritte aus:

<style id="antiClickjack">body{display:none !important;}</style>

Zuerst eine ID zum Stilelement gilt selbst:

<script type="text/javascript">
   if (self === top) {
       var antiClickjack = document.getElementById("antiClickjack");
       antiClickjack.parentNode.removeChild(antiClickjack);
   } else {
       top.location = self.location;
   }
</script>

Auf diese Weise kann alles im Dokument HEAD sein und Sie nur eine Methode / taglib in Ihrem API benötigen.

Referenz: https://www.codemagi.com/blog/post/194

Damit endete die einfachste Lösung für mich zu sein.

    <p id="demofsdfsdfs"></p>

<script>

if(window.self !== window.top) {

//run this code if in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "in frame";

}else{

//run code if not in an iframe
document.getElementById("demofsdfsdfs").innerHTML = "no frame";
}

</script>