Eine kurze Analyse verschiedener Möglichkeiten, mit JQuery übergeordnete Seitenelemente oder Daten abzurufen

jQuery ist eine häufig verwendete JavaScript-Bibliothek, da sie die Entwicklung vieler Aufgaben wie das Durchlaufen von HTML-Dokumenten und die Ereignisverarbeitung vereinfacht.

In einigen Fällen muss JavaScript mit dem Iframe oder der übergeordneten Seite kommunizieren und dann die Elemente oder Daten auf der übergeordneten Seite abrufen. Es gibt verschiedene Methoden, um Elemente oder Daten einer übergeordneten Seite abzurufen.

1. Übergeordnetes Objekt

Die übergeordnete Seite kann das übergeordnete Objekt verwenden, um auf die aktuelle Seite zuzugreifen, und die untergeordnete Seite kann auch über window.parent auf die übergeordnete Seite zugreifen. Verwenden Sie parent, um alle Elemente und Attribute der übergeordneten Seite abzurufen. Angenommen, es gibt eine übergeordnete Seite, die ein Iframe-Element namens myIframe enthält, kann die untergeordnete Seite den folgenden Code verwenden, um alle h1-Tags auf der übergeordneten Seite abzurufen:

var h1s = parent.$("h1");

2. window.top-Objekt

top-Objekt kann auch dazu verwendet werden Greifen Sie auf die übergeordnete Seite zu. Es bietet Zugriff auf die gesamte Seitenhierarchie, über die auf das gesamte Fenster zugegriffen werden kann. Sie können top verwenden, um auf Elemente und Attribute auf der übergeordneten Seite zuzugreifen.

Im Vergleich zu Parent liegt der Hauptvorteil der Verwendung von top in der domänenübergreifenden Verwendung. Wenn die übergeordnete Seite und die untergeordnete Seite unterschiedliche Domänennamen haben, verwenden Sie top, um domänenübergreifende Sicherheitsbeschränkungen zu umgehen.

var h1s = window.top.$("h1");

3. PostMessage-Methode verwenden

postMessage ist eine neue in HTML5 eingeführte Methode, die zum sicheren Übertragen von Nachrichten zwischen zwei Fenstern verwendet wird. Bei Verwendung der postMessage-Methode kann die untergeordnete Seite Nachrichten an die übergeordnete Seite senden und die übergeordnete Seite kann diese Nachrichten abhören.

Code der untergeordneten Seite:

window.parent.postMessage("Hello from iframe!", "*");

Auf der übergeordneten Seite können Sie Nachrichten abhören und bei Bedarf Elemente oder Daten von der übergeordneten Seite abrufen:

window.addEventListener("message", function(event) {
  if (event.source != window.parent) return;

  // 获取消息的内容
  var data = event.data;

  // 在父页面中查找h1元素
  var h1s = $('h1', event.source.document);
}, false);

4. Verwenden Sie die Eigenschaft window.opener (nur Popup-Fenster)

Wenn die untergeordnete Seite in einem Popup-Fenster geöffnet wird und auf das Objekt des geöffneten übergeordneten Fensters über die Eigenschaft window.opener zugegriffen werden kann.

var h1s = window.opener.$("h1");

Kurz gesagt, unabhängig von der verwendeten Methode erfordert das Abrufen der Elemente oder Daten der übergeordneten Seite domänenübergreifende Berechtigungen. Stellen Sie bei der Verwendung domänenübergreifender Funktionen sicher, dass Sie Sicherheit implementieren und Best Practices befolgen.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse verschiedener Möglichkeiten, mit JQuery übergeordnete Seitenelemente oder Daten abzurufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!