jquery führt die Methode der übergeordneten Seite aus-Front-End-Fragen und Antworten-php.cn

jquery führt die Methode der übergeordneten Seite aus

WBOY

Freigeben： 2023-05-28 13:37:11

Original

1097 Leute haben es durchsucht

Bei der Entwicklung von Webanwendungen gibt es häufig Situationen, in denen Sie Methoden auf der übergeordneten Seite von einer Seite aus ausführen müssen. jQuery ist eine leistungsstarke JavaScript-Bibliothek, die uns dabei hilft, dieses Ziel einfach zu erreichen.

In diesem Artikel stellen wir vor, wie Sie mit jQuery Methoden für übergeordnete Seiten ausführen. Im Folgenden werden wir es in den folgenden Teilen ausführlich erläutern:

Definitionsmethode in der übergeordneten Seite
Unterseite erhält Verweis auf übergeordnete Seite
Eine andere Möglichkeit, die Methode der übergeordneten Seite auszuführen
Die in der übergeordneten Seite definierte Methode
Im JavaScript-Skript in Auf der übergeordneten Seite können wir einige Methoden definieren, von denen wir erwarten, dass sie auf untergeordneten Seiten aufgerufen werden. Bei diesen Methoden kann es sich um jede Art von Methode handeln, z. B. um die Verarbeitung einer Geschäftslogik oder die Aktualisierung einiger Webseitenelemente usw. Hier geben wir ein einfaches Beispiel:

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

Nach dem Login kopieren

In diesem Beispiel definieren wir eine Methode namens „displayMessage()“, die zum Öffnen eines Dialogfelds verwendet wird und ein einfaches anzeigt Nachricht. Wir werden diese Methode auf der untergeordneten Seite aufrufen.

Zuerst müssen wir den Verweis auf die übergeordnete Seite in der untergeordneten Seite abrufen. Wir können dies tun, indem wir die Eigenschaft window.parent verwenden:

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

Nach dem Login kopieren

In diesem Beispiel verwenden wir die Methode document.ready() von jQuery. Diese Methode wartet, bis die gesamte Seite geladen ist, bevor sie ausgeführt wird. Wir speichern die erhaltene übergeordnete Seitenreferenz in einer Variablen parentWindow.

Nachdem wir den Verweis auf die übergeordnete Seite erhalten haben, können wir die auf der übergeordneten Seite definierte Methode aufrufen:
#🎜 🎜#
```
$(document).ready(function(){
   var parentWindow = window.parent;
   parentWindow.displayMessage();
});
```
Nach dem Login kopieren

Eine andere Möglichkeit, die Methode der übergeordneten Seite auszuführen

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

Nach dem Login kopieren

Auf der untergeordneten Seite:

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

Nach dem Login kopieren

In diesem Beispiel: We verwendete die Methode window.open(), um eine Unterseite mit dem Namen child.html zu öffnen. Wenn der Benutzer auf der übergeordneten Seite auf eine Schaltfläche klickt, wird die untergeordnete Seite geöffnet und der Code auf der untergeordneten Seite wird sofort aufgerufen.

Auf der untergeordneten Seite verwenden wir die Eigenschaft window.opener, um einen Verweis auf das übergeordnete Fenster zu erhalten. Über diese Referenz können wir auf jede Methode oder Eigenschaft auf der übergeordneten Seite zugreifen. In diesem Beispiel rufen wir die Methode displayMessage() auf der übergeordneten Seite über die Referenz auf die übergeordnete Seite auf.

Zusammenfassung

Bei der Entwicklung von Webanwendungen müssen wir häufig Methoden auf der übergeordneten Seite von der untergeordneten Seite aus aufrufen. Durch die Verwendung von jQuery können wir dieses Ziel leicht erreichen. In diesem Artikel haben wir zwei Methoden vorgestellt, mit denen wir problemlos Methoden von der übergeordneten Seite auf der untergeordneten Seite aufrufen können.

Das obige ist der detaillierte Inhalt vonjquery führt die Methode der übergeordneten Seite aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!