Comment pouvons-nous détecter si une page Web est chargée dans un IFrame ?

Identifier le chargement d'une iframe pour une page Web polyvalente

Dans le domaine du développement Web, faire la différence entre une page Web chargée dans une iframe et directement dans une fenêtre de navigateur est souvent une tâche cruciale. Ceci est particulièrement pertinent pour les applications qui visent à remplir plusieurs objectifs, comme le rendu à la fois d'un site Web normal et d'une page de canevas au sein de Facebook. Pour relever ce défi, nous explorons des méthodes permettant de déterminer l'environnement de chargement de la page Web.

Détection du chargement d'une iframe

Pour déterminer si une page Web est chargée dans une iframe, nous pouvons exploiter les différences entre les objets fenêtre. En particulier, la propriété self représente la fenêtre actuelle, tandis que la propriété top désigne la fenêtre ou le cadre le plus à l'extérieur. Si ces deux objets window ne sont pas identiques, cela implique que la page Web est chargée dans une iframe.

Implémentation du code

const inIframe = () => window.self !== window.top;

Cette fonction renvoie une valeur booléenne indiquant si la page est chargée dans une iframe. Une valeur vraie indique le chargement d'une iframe, tandis qu'une valeur fausse signifie un chargement direct dans la fenêtre du navigateur.

Mise à jour pour l'accès multi-origine

Les mesures de sécurité du navigateur peuvent restreindre l'accès à window.top en raison de la politique de même origine. Pour résoudre ce problème, un bloc try-catch peut être utilisé :

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

Dans cette version mise à jour, une exception provoquée par un accès bloqué à window.top est gérée en supposant le chargement d'une iframe.

Conclusion

En comprenant les différences entre les objets fenêtre, nous avons établi des méthodes pour détecter de manière fiable si une page Web est chargée dans un iframe. Ces connaissances permettent aux développeurs de créer des applications qui adaptent leur comportement en fonction de l'environnement de chargement, garantissant ainsi une fonctionnalité transparente sur diverses plates-formes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!