Comment identifier si une page web est chargée dans un iframe ou directement dans la fenêtre du navigateur ?

Question

J'écris une application facebook basée sur une iframe. Maintenant, je veux utiliser la même page html pour rendre le site web normal ainsi que la page canvas dans facebook. Je veux savoir si je peux déterminer si la page a été chargée dans l'iframe ou directement dans le navigateur ?

Answer 1

Les navigateurs peuvent bloquer l'accès à window.top en raison de politique de même origine . IE ont également lieu. Voici le code de travail :

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

top et self sont tous deux window (ainsi que les objets parent ), donc vous voyez si votre fenêtre est la fenêtre supérieure.

Answer 2

Lorsqu'il se trouve dans un iframe de la même origine que le parent, l'élément window.frameElement renvoie l'élément (par exemple iframe ou object ) dans lequel la fenêtre est intégrée. Sinon, si l'on navigue dans un contexte de niveau supérieur, ou si le cadre parent et le cadre enfant ont des origines différentes, il sera évalué à null .

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

Il s'agit d'un Norme HTML avec une prise en charge de base dans tous les navigateurs modernes.

Answer 3

RoBorg a raison, mais je voulais ajouter une note complémentaire.

Dans IE7/IE8, lorsque Microsoft a ajouté les onglets à son navigateur, il a cassé un élément qui peut causer des ravages dans votre JS si vous ne faites pas attention.

Imaginez cette mise en page :

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

Maintenant, dans le cadre "baz", vous cliquez sur un lien (pas de cible, se charge dans le cadre "baz"), cela fonctionne bien.

Si la page qui est chargée, appelons-la special.html, utilise JS pour vérifier si "it" a un cadre parent nommé "bar", elle retournera true (attendu).

Maintenant, disons que la page special.html, lorsqu'elle se charge, vérifie l'existence du cadre parent et son nom, et si c'est "bar", elle se recharge dans le cadre bar, par exemple.

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

Jusqu'ici tout va bien. Maintenant vient le bug.

Supposons qu'au lieu de cliquer sur le lien original comme d'habitude, et de charger la page special.html dans le cadre "baz", vous avez fait un clic moyen ou choisi de l'ouvrir dans un nouvel onglet.

Lorsque ce nouvel onglet se charge ( sans aucun cadre parental ! ) IE entrera dans une boucle sans fin de chargement de page ! parce qu'IE "copie" la structure du cadre en JavaScript de telle sorte que le nouvel onglet A un parent, et ce parent A le nom "bar".

La bonne nouvelle, c'est que la vérification :

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

dans ce nouvel onglet renvoie bien vrai, et vous pouvez donc tester cette condition étrange.

Answer 4

La réponse acceptée n'a pas fonctionné pour moi à l'intérieur du contenu script d'une extension Firefox 6.0 (Addon-SDK 1.0) : Firefox exécute le contenu script dans chacun : la fenêtre de niveau supérieur et dans toutes les iframes.

Dans le contenu script, j'obtiens les résultats suivants :

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

Ce qui est étrange avec cette sortie, c'est qu'elle est toujours la même, que le code soit exécuté dans une iframe ou dans la fenêtre de niveau supérieur.

D'autre part, Google Chrome semble n'exécuter mon contenu script qu'une seule fois dans la fenêtre de niveau supérieur, de sorte que ce qui précède ne fonctionnerait pas du tout.

Ce qui a finalement fonctionné pour moi dans un contenu script dans les deux navigateurs est le suivant :

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

Sans iframes, cette impression 0:0 dans une fenêtre de niveau supérieur contenant une image, il imprime 1:1 et dans l'unique iframe d'un document, il imprime 0:1 .

Cela permet à mon extension de déterminer dans les deux navigateurs si des iframes sont présentes, et en plus dans Firefox si elle est exécutée à l'intérieur d'une des iframes.

Answer 5

J'utilise ceci :

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