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

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);

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");

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 :

<button onclick="window.close()">关闭当前窗口</button>

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);
}

Fenêtre enfant :

window.opener.showMessage("Hello,world!");

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");

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;
}

Fenêtre enfant :

<button onclick="window.opener.changeColor(&#39;red&#39;)">变红色</button>

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);

Fenêtre enfant :

<div id="data">子窗口数据</div>

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!