Une brève analyse des méthodes de fonctionnement des fenêtres enfants et des fenêtres parents dans jQuery

PHPz
Libérer: 2023-04-10 14:36:18
original
1114 Les gens l'ont consulté

Avec le développement d'Internet, les pages Web accordent de plus en plus d'attention à l'expérience utilisateur, et jQuery, en tant qu'excellente bibliothèque JavaScript, apporte une grande commodité au développement front-end. Dans les pages Web, l'interaction entre les fenêtres enfants et les fenêtres parents est souvent utilisée. Présentons les méthodes de fenêtre enfant et de fenêtre parent de jQuery.

1. Fonctionnement de la sous-fenêtre

1. Ouvrez la sous-fenêtre

Lors de l'ouverture de la sous-fenêtre, nous utilisons généralement window.open(), qui peut transmettre quatre paramètres, à savoir :

window.open(URL,name,features,replace);
Copier après la connexion

où, l'URL. est la sous-fenêtre. L'adresse de la fenêtre nom est le nom de la sous-fenêtre, qui peut être spécifié lors de l'ouverture d'une nouvelle fenêtre. Features est un paramètre de chaîne facultatif qui spécifie les propriétés de la fenêtre, telles que la taille, position de la fenêtre, s'il y a une barre d'outils, etc. ; replace précise si elle est dans Ajouter une URL à l'historique.

Exemple de code :

window.open("child.html","childWindow","height=200,width=200");
Copier après la connexion

2. Fermez la fenêtre enfant

Dans la fenêtre enfant, nous pouvons utiliser la méthode window.close() pour fermer la fenêtre actuelle.

Exemple de code :

Copier après la connexion

3. Appelez la méthode de la fenêtre parent dans la fenêtre enfant

Dans la fenêtre enfant, nous pouvons obtenir l'objet de la fenêtre parent via window.opener et appeler sa méthode.

Exemple de code :

Fenêtre parent :

function showMessage(message){ alert(message); }
Copier après la connexion

Fenêtre enfant :

window.opener.showMessage("Hello,world!");
Copier après la connexion

2. Fonctionnement de la fenêtre parent

1. Obtenez l'objet fenêtre enfant

Dans la fenêtre parent, nous pouvons le renvoyer via la fenêtre.open( ) méthode Objet Window pour obtenir l'objet fenêtre enfant ouvert.

Exemple de code :

var childWindow = window.open("child.html","childWindow","height=200,width=200");
Copier après la connexion

2. Appelez la méthode de la fenêtre enfant dans la fenêtre parent

Dans la fenêtre parent, nous pouvons appeler la méthode dans la fenêtre enfant qui a été ouverte.

Exemple de code :

Fenêtre parent :

function changeColor(color){ childWindow.document.body.style.backgroundColor = color; }
Copier après la connexion

Fenêtre enfant :

Copier après la connexion

3. Obtenir les données de la fenêtre enfant dans la fenêtre parent

Dans la fenêtre parent, nous pouvons obtenir les données de la fenêtre enfant via l'objet fenêtre de la fenêtre enfant.

Exemple de code :

Fenêtre parent :

var childWindow = window.open("child.html","childWindow","height=200,width=200"); setTimeout(function(){ var childData = childWindow.document.getElementById("data").innerHTML; alert(childData); },2000);
Copier après la connexion

Fenêtre enfant :

子窗口数据
Copier après la connexion

Résumé :

Grâce à l'introduction ci-dessus, nous pouvons voir que les méthodes de fenêtre enfant et de fenêtre parent de jQuery sont très simples, mais elles implémentent le neutron de la page Web. l'interaction entre la fenêtre et la fenêtre parent offre plus de possibilités pour l'expérience utilisateur. Dans les projets réels, si l'interaction entre la fenêtre enfant et la fenêtre parent est nécessaire, les développeurs peuvent utiliser la méthode ci-dessus pour y parvenir.

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!

source:php.cn
Déclaration de ce site Web
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
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!