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

function amiLoadedInIFrame() {
    try {
         // Introduce a new propery in window.top
         window.top.dummyAttribute = true;
         // If window.dummyAttribute is there.. then window and window.top are same intances
         return !window.dummyAttribute;
    } catch(e) {
         // Exception will be raised when the top is in different domain
         return true;
    }
}

Answer 2

Ich habe tatsächlich verwendet, um window.parent zu überprüfen und es funktionierte für mich, aber in letzter Zeit Fenster ist ein zyklisches Objekt und hat immer einen Elternschlüssel, iframe oder kein iframe.

Wie in den Kommentaren vorgeschlagen, funktioniert ein harter Vergleich mit window.parent. Nicht sicher, ob dies funktioniert, wenn iframe ist genau die gleiche Webseite als Elternteil.

window === window.parent;

Answer 3

Nach dem, was @magnoz sagte, ist hier eine Code-Implementierung seiner Antwort.

constructor() {
    let windowLen = window.frames.length;
    let parentLen = parent.frames.length;

    if (windowLen == 0 && parentLen >= 1) {
        this.isInIframe = true
        console.log('Is in Iframe!')
    } else {
        console.log('Is in main window!')
    }
}

Answer 4

var inIFrame = window.location !== window.parent.location;

Answer 5

Wenn Sie wissen möchten, ob der Benutzer auf Ihre App über die Registerkarte "Facebook-Seite" oder "Canvas" zugreift, suchen Sie nach der signierten Anfrage. Wenn Sie diese nicht erhalten, greift der Benutzer wahrscheinlich nicht über Facebook zu. Um sicherzugehen, überprüfen Sie die Struktur und den Inhalt der signed_request-Felder.

Mit dem php-sdk können Sie den Signed Request wie folgt erhalten:

$signed_request = $facebook->getSignedRequest();

Mehr über Signed Request können Sie hier lesen:

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

und hier:

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