Eine kurze Analyse der Betriebsmethoden von untergeordneten Fenstern und übergeordneten Fenstern in jQuery

Mit der Entwicklung des Internets legen Webseiten immer mehr Wert auf die Benutzererfahrung, und jQuery bietet als hervorragende JavaScript-Bibliothek großen Komfort bei der Front-End-Entwicklung. Auf Webseiten wird häufig die Interaktion zwischen untergeordneten Fenstern und übergeordneten Fenstern verwendet. Lassen Sie uns die Methoden für untergeordnete Fenster und übergeordnete Fenster von jQuery vorstellen.

1. Unterfenster-Bedienung

1. Öffnen Sie das Unterfenster

Beim Öffnen eines Unterfensters verwenden wir normalerweise window.open (), Es können vier Parameter übergeben werden:

window.open(URL,name,features,replace);

Unter diesen ist URL die Adresse des Unterfensters; Name ist der Name des Unterfensters, der beim Öffnen angegeben werden kann ein neues Fenster; Features ist eine optionale Zeichenfolge. Parameter geben die Eigenschaften des Fensters an, z. B. die Größe, die Position des Fensters, ob eine Symbolleiste vorhanden ist usw.; Ersetzen gibt an, ob eine URL zum Verlauf hinzugefügt werden soll.

Beispielcode:

window.open("child.html","childWindow","height=200,width=200");

2. Schließen Sie das untergeordnete Fenster

Im untergeordneten Fenster können wir die Methode window.close() verwenden, um Schließen Sie das aktuelle Fenster.

Beispielcode:

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

3. Rufen Sie die übergeordnete Fenstermethode im untergeordneten Fenster auf.

Im untergeordneten Fenster können wir window.opener verwenden um das Objekt des übergeordneten Fensters abzurufen und seine Methode aufzurufen.

Beispielcode:

Übergeordnetes Fenster:

function showMessage(message){
    alert(message);
}

Untergeordnetes Fenster:

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

2. Bedienung des übergeordneten Fensters#🎜 🎜#

1. Holen Sie sich das untergeordnete Fensterobjekt

Im übergeordneten Fenster können wir das geöffnete untergeordnete Fensterobjekt über das von der Methode window.open() zurückgegebene Fensterobjekt abrufen.

Beispielcode:

var childWindow = window.open("child.html","childWindow","height=200,width=200");

2. Rufen Sie die untergeordnete Fenstermethode im übergeordneten Fenster auf.

Im übergeordneten Fenster können wir das untergeordnete Fenster aufrufen dass Methoden im Fenster geöffnet wurden.

Beispielcode:

Übergeordnetes Fenster:

function changeColor(color){
    childWindow.document.body.style.backgroundColor = color;
}

Untergeordnetes Fenster:

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

3. Rufen Sie das übergeordnete Fenster auf Daten des untergeordneten Fensters

Im übergeordneten Fenster können wir die Daten des untergeordneten Fensters über das Fensterobjekt des untergeordneten Fensters abrufen.

Beispielcode:

Übergeordnetes Fenster:

var childWindow = window.open("child.html","childWindow","height=200,width=200");

setTimeout(function(){
    var childData = childWindow.document.getElementById("data").innerHTML;
    alert(childData);
},2000);

Untergeordnetes Fenster:

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

Zusammenfassung:

# 🎜🎜#Anhand der obigen Einführung können wir sehen, dass die untergeordneten Fenster- und übergeordneten Fenstermethoden von jQuery sehr einfach sind, aber die Interaktion zwischen untergeordneten Fenstern und übergeordneten Fenstern in Webseiten realisieren und so mehr Möglichkeiten für die Benutzererfahrung bieten. Wenn in tatsächlichen Projekten eine Interaktion zwischen dem untergeordneten Fenster und dem übergeordneten Fenster erforderlich ist, können Entwickler dies mithilfe der oben genannten Methode erreichen.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Betriebsmethoden von untergeordneten Fenstern und übergeordneten Fenstern in jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!