oujood.com

Utilisation des propriétés "self" et "top" de l'objet "window" en JavaScript. Comment vérifier si une fenêtre est la fenêtre parent ou une fenêtre enfant?

Apprenez comment utiliser les propriétés "self" et "top" de l'objet "window" en JavaScript pour détecter si une fenêtre est la fenêtre parent ou une fenêtre enfant ou pour manipuler la fenêtr.
.....

chercher |

Définition et utilisation propriétés self

JavaScript cours tutorial

La propriété self retourne une reference à la fenêtre active.

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La propriété self est prise en charge dans tous les principaux navigateurs.

Syntaxe

window.self


Définition et utilisation propriété top

La propriété top retourne la fenêtre au premier plan de la fenêtre en cours.

Appui de navigateur

Internet Explorer Firefox Opera Google Chrome Safari

La propriété top est pris en charge dans tous les principaux navigateurs.

Syntaxe

window.top


Exemple vérifier si une fenêtre est la même que la fenêtre parente

Dans cet exemple un clic sur le bouton « vérifier », appele  la fonction Verif()et l'état actuel de la fenêtre est vérifier. Si la fenêtre supérieure (window.top) est différente de la fenêtre active (window.self),  la sortie sera  « Cette fenêtre n'est pas la même que la fenêtre prente !! elle est dans une frame ». Si la fenêtre supérieure est égale à la fenêtre active, la sorrie sera «Cette fenêtre est la même que la fenêtre prente! » :

Exemple :       Copier le code

  <!doctype html>
  <html lang="fr">
  <head>
              <meta charset="UTF-8">
              <title>Exemple self et top</title>
  <script>
  function Verif()
  {
  if (window.top!=window.self)
    {
    document.write("<p>Cette fenêtre n'est pas la même que la
  fenêtre prente !! elle est dans une frame</p>")
    }
  else
    {
    document.write("<p>Cette fenêtre est la même que la
  fenêtre prente!</p>")
    }
  }
  </script>
  </head>
  <body>
  <button onclick="Verif()">Vérifier</button>
  </body>
  </html>
 

En fonction du résultat, la fonction affiche un message différent en utilisant la méthode document.write().

Cependant, veuillez noter que l'utilisation de document.write() n'est pas recommandée, car elle efface tout le contenu existant de la page HTML. Il est préférable d'utiliser des méthodes plus appropriées pour ajouter ou modifier le contenu HTML, comme innerHTML.

Voici une version modifiée du code, qui utilise innerHTML pour afficher le message :

Exemple :       Copier le code

<!doctype html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <title>Exemple self et top</title>
    <script>
        function Verif() {
            var messageElement = document.getElementById("message");
            if (window.top != window.self) {
                messageElement.innerHTML = "<p>Cette fenêtre n'est pas la même que la fenêtre parente !! Elle est dans une frame</p>";
            } else {
                messageElement.innerHTML = "<p>Cette fenêtre est la même que la fenêtre parente !</p>";
            }
        }
    </script>
</head>
<body>
<button onclick="Verif()">Vérifier</button>
<div id="message"></div>
</body>
</html>

Dans cette version, j'ai ajouté un élément div avec l'ID "message" qui servira de conteneur pour afficher le message. La fonction Verif() utilise innerHTML pour mettre à jour le contenu de cet élément avec le message approprié.

N'oubliez pas que dans cet exemple, j'ai utilisé innerHTML pour mettre à jour le contenu de l'élément "message". Dans des projets réels, il est souvent recommandé d'utiliser des méthodes plus sécurisées, telles que textContent, pour éviter les problèmes de sécurité liés à l'injection de code HTML non sécurisé.

Par carabde 30 mars 2014



Voir aussi nos tutoriel :

Balise td

Définit une cellule dans un tableau

fonction gmstrftime

Formate une date/heure GMT/UTC en fonction de la configuration locale

Les tableaux dans bootstrap

Comment créer des tableaux élégants avec Bootstrap.