Heim > Web-Frontend > js-Tutorial > Hauptteil

Die Ebene schließt die Popup-Ebene und aktualisiert die Implementierungsmethode der übergeordneten Schnittstellenfunktion

小云云
Freigeben: 2018-01-18 16:34:20
Original
1904 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich die Funktion der Ebene zum Schließen der Popup-Ebene und zum Aktualisieren der übergeordneten Schnittstelle vorgestellt. Er analysiert die gängigen Implementierungstechniken und die damit verbundenen Vorsichtsmaßnahmen für die Verwendung der Laui-Ebene zum Aktualisieren der übergeordneten Schnittstelle beim Schließen der Popup-Ebene Freunde in Not können sich auf die folgenden Beispiele beziehen und hoffen, dass sie allen helfen können.

Das Beispiel in diesem Artikel beschreibt die Ebenenfunktion zum Schließen der Popup-Ebene und zum Aktualisieren der übergeordneten Oberfläche. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Layer ist eine Web-Elastic-Layer-Komponente, die sich in den letzten Jahren großer Beliebtheit erfreut. Sie verfügt über eine umfassende Palette an Lösungen und richtet sich an Entwickler aller Art Ebenen Sie Die Seiten werden leicht ein reichhaltiges und benutzerfreundliches Bedienerlebnis haben.

Ein aktuelles Projekt verwendet das Hui-Front-End-Framework und seine Popup-Ebene verwendet das Ebenen-Plug-In. Für die Popup-Ebene kennt jeder eine Bedienerfahrung, das heißt, das Pop zu schließen -Up-Ebene muss die übergeordnete Seite aktualisiert werden. Als ich anfing zu schreiben, geriet ich in mein eigenes Missverständnis. Nachdem die Popup-Ebene erfolgreich verarbeitet wurde, lautete das Folgende:


var index = parent.layer.getFrameIndex(window.name);
parent.location.href=url;
parent.layer.close(index);
Nach dem Login kopieren

Das ist richtig. aber wenn es so geschrieben ist, kann es nur von einem Ort aus aufgerufen werden. Wenn es von mehreren Orten aus aufgerufen wird, kann es nicht zur ursprünglichen Adresse zurückkehren, sondern wird zu einer neuen URL-Adresse weitergeleitet. Und gerade in der Mitte meines Projekts wurde eine bestimmte Popup-Ebene von zwei Stellen aus aufgerufen, daher ist diese Lösung offensichtlich nicht geeignet und muss optimiert werden. Nach der Suche auf Baidu habe ich die folgenden zwei Optimierungslösungen gefunden:

Option 1:

Rufen Sie die Funktion zum erneuten Laden der übergeordneten Schnittstelle im Layer-Pop auf -up-Schicht


window.parent.location.reload();
var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
Nach dem Login kopieren

Option 2:

Rufen Sie die End-Callback-Methode der Ebene auf Plug-in:

Ende – Rückruf wird ausgelöst, nachdem die Ebene zerstört wurde

Typ: Funktion, Standard: null

Ob Bestätigung oder Abbruch, solange die Ebene zerstört wird, wird end ohne Angabe von Parametern ausgeführt.

Wenn das übergeordnete Fenster das Ebenen-Popup-Feld öffnet, fügen Sie den Endrückruf hinzu


function openLayer() {
  //iframe层
    parent.layer.open({
      type: 2,
      title: '修改',
      shadeClose: false, //点击遮罩关闭
      shade: 0.8,
      area: ['30%', '45%'],
      maxmin: true,
      closeBtn: 1,
      content: [url, 'yes'], //iframe的url,yes是否有滚动条
      end: function () {
        location.reload();
      }
});
Nach dem Login kopieren

Nachdem die Verarbeitung des Ebenen-Popup-Felds abgeschlossen ist Es besteht keine Notwendigkeit, andere Aktualisierungsvorgangsfunktionen aufzurufen. Schließen Sie es einfach direkt.


var index = parent.layer.getFrameIndex(window.name);
parent.layer.close(index);
Nach dem Login kopieren

Im Vergleich dazu ist die erste Option besser, da in Bezug auf die Betriebslogik Das manuelle Schließen des Popup-Fensters sollte den Aktualisierungsvorgang nicht auslösen. Erst wenn die Verarbeitungslogik des Popup-Felds erfolgreich ausgeführt wurde und die Funktion zum Schließen des Popup-Felds aufgerufen wird, wird der Aktualisierungsvorgang der übergeordneten Schnittstelle ausgeführt Basierend auf dieser Logik sollte Option eins ausgewählt werden. Option zwei: Die Seite wird auf jeden Fall aktualisiert, was den Verarbeitungsdruck des Servers tatsächlich ohne Grund erhöht.

Option 2: kann das Problem lösen, die verarbeiteten Ergebnisse der Unterseite an die übergeordnete Seite der Unterseite zu senden.

Für das Problem, dass das Senden des vorherigen Formulars fehlschlägt, wenn layer.js einen Rückruf zum Schließen der Popup-Ebene der übergeordneten Klasse hat:

So lösen Sie das Problem : Es sind viele online und einige werden umgeleitet. Schließen Sie bei Ajax-Anfragen die übergeordnete Popup-Ebene nach der Datenübertragung:

So schließen Sie die übergeordnete Popup-Ebene:


var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index); // 关闭layer
Nach dem Login kopieren

Es ist in Ordnung, Ajax zu verwenden, aber was ich tue, ist die Zahlung. Die Seite muss angezeigt werden, bevor ich bezahlen kann, und sie kann nicht in Ajax konvertiert werden . Wie kann ich helfen? Später sagte mein Chef: „Können Sie den Shutdown nicht später durchführen?“ Das ist eine Idee, die man gerne ausprobieren würde.

Angehängter Code:


$("#myForm").submit();
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
setTimeout(function () {
  parent.layer.close(index); // 关闭layer
},500);
Nach dem Login kopieren

Ich muss auch ein Fenster öffnen, nachdem ich das übergeordnete Fenster geschlossen habe. Wie man das löst, habe ich später in der Ebene entdeckt. Es gibt eine gute Möglichkeit, die Methode des übergeordneten Fensters aufzurufen: Übergeben Sie den Namen der übergeordneten Klasse Öffnen Sie das übergeordnete Fenster.

Verwandte Empfehlungen:

Detaillierte Erläuterung der Interaktion zwischen übergeordneten und untergeordneten Ebenen im Laui-Framework

Die Ebenenfront- Endkomponente in Laui implementiert die Bildanzeigefunktion

Detaillierte Erläuterung von Beispielen zum Öffnen und Schließen von Popup-Ebenen mit jQuery und Layer

Das obige ist der detaillierte Inhalt vonDie Ebene schließt die Popup-Ebene und aktualisiert die Implementierungsmethode der übergeordneten Schnittstellenfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage