Maison > Article > interface Web > jquery exécute la méthode de la page parent

jquery exécute la méthode de la page parent

WBOYoriginal: 2023-05-28 13:37:111093parcourir

Lors du développement d'applications Web, il arrive souvent que vous deviez exécuter une méthode dans une page parent à partir d'une seule page. jQuery est une puissante bibliothèque JavaScript qui nous aide à atteindre facilement cet objectif.

Dans cet article, nous présenterons comment exécuter des méthodes de page parent à l'aide de jQuery. Ci-dessous, nous l'expliquerons en détail dans les parties suivantes :

Méthodes définies dans la page parent
La page enfant obtient la référence de la page parent
La page enfant appelle la méthode de la page parent
Une autre méthode exécute la page parent method
Parent Définir les méthodes dans la page
Dans le script JavaScript de la page parent, nous pouvons définir certaines méthodes que nous nous attendons à ce qu'elles soient appelées dans la page enfant. Ces méthodes peuvent être n'importe quel type de méthode, comme le traitement d'une logique métier ou la mise à jour de certains éléments de page Web, etc. Ici, nous donnons un exemple simple :

<html>
   <head>
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script>
     function displayMessage(){
         alert("Hello from parent page!");
     }
   </script>
   </head>
   <body>
      <a href="child.html" target="_blank">Open Child Page</a>
   </body>
</html>

Dans cet exemple, nous définissons une méthode nommée "displayMessage()", qui est utilisée pour faire apparaître une boîte de dialogue et afficher un message simple. Nous appellerons cette méthode dans la page enfant.

La sous-page obtient la référence de la page parent
Tout d'abord, nous devons obtenir la référence à la page parent dans la sous-page. Nous pouvons le faire en utilisant la propriété window.parent :

$(document).ready(function(){
   var parentWindow = window.parent;
});

Dans cet exemple, nous utilisons la méthode document.ready() de jQuery. Cette méthode attend que la page entière soit chargée avant de s'exécuter. Nous stockons la référence de page parent obtenue dans une variable parentWindow.

La page enfant appelle la méthode de la page parent
Après avoir obtenu la référence à la page parent, on peut appeler la méthode définie dans la page parent :

$(document).ready(function(){
   var parentWindow = window.parent;
   parentWindow.displayMessage();
});

Dans cet exemple, on appelle le displayMessage( dans la page parent ) méthode. Nous obtenons une référence à la page parent en accédant à la propriété window.parent transmise à la fenêtre parent. Nous utilisons ensuite cette référence pour appeler des méthodes dans la page parent.

Une autre façon d'exécuter la méthode de la page parent
Il existe également une autre façon d'exécuter la méthode dans la page parent, on peut utiliser la propriété window.opener dans la page enfant, qui renvoie la référence de la fenêtre qui a ouvert le courant fenêtre. Si la fenêtre parent de la fenêtre n'est pas ouverte, cette propriété renvoie null. Voici un exemple :

Dans la page parent :

<html>
  <head>
    <title>Parent Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      function displayMessage(){
        alert("Hello from parent page!")
      }
    </script>
  </head>
  <body>
     <button onclick="window.open('child.html','_blank')">Open Child Page</button>
  </body>
</html>

Dans la page enfant :

$(document).ready(function(){
   var parentWindow = window.opener;
   parentWindow.displayMessage();
});

Dans cet exemple, nous utilisons la méthode window.open() pour ouvrir une page enfant nommée child.html. Lorsque l'utilisateur clique sur un bouton de la page parent, la page enfant est ouverte et le code de la page enfant est immédiatement appelé.

Dans la page enfant, nous utilisons la propriété window.opener pour obtenir une référence à la fenêtre parent. Grâce à cette référence, nous pouvons accéder à n'importe quelle méthode ou propriété sur la page parent. Dans cet exemple, nous appelons la méthode displayMessage() sur la page parent via la référence de la page parent.

Résumé

Lors du développement d'applications Web, nous avons souvent besoin d'appeler des méthodes de la page parent à partir de la page enfant. En utilisant jQuery, nous pouvons facilement atteindre cet objectif. Dans cet article, nous avons présenté deux méthodes grâce auxquelles nous pouvons facilement appeler des méthodes depuis la page parent vers la page enfant.

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment accéder à la base de données avec jqueryArticle suivant：Comment accéder à la base de données avec jquery

Articles Liés

Voir plus