So erhalten Sie übergeordnete Seitenelemente von einer HTML-Unterseite

Um die Elemente der übergeordneten Seite in einer HTML-Unterseite abzurufen, sind bestimmte Codebeispiele erforderlich.

Bei der Entwicklung von Webseiten müssen wir manchmal die Elemente der übergeordneten Seite auf der Unterseite abrufen, um bestimmte Vorgänge oder Daten auszuführen Interaktion. In diesem Artikel wird erläutert, wie Sie die Elemente der übergeordneten Seite in einer HTML-Unterseite erhalten, und es werden spezifische Codebeispiele bereitgestellt.

1. Verwenden Sie das window.parent-Objekt von JavaScript.

In HTML können Sie das window.parent-Objekt von JavaScript verwenden, um die Elemente der übergeordneten Seite abzurufen. Die spezifischen Schritte sind wie folgt:

1. JavaScript-Code zur Unterseite hinzufügen

Fügen Sie in der HTML-Datei der Unterseite den folgenden JavaScript-Code hinzu:

<script><br> // Elemente der übergeordneten Seite abrufen<br> var parentElement = window. parent.document.getElementById('parent-element-id');</script>

// Elemente der übergeordneten Seite bearbeiten oder verwenden
parentElement.innerHTML = "Dies ist eine Änderung der untergeordneten Seite";
< ;/script>

above Verwenden Sie im Code zuerst window.parent, um das Dokumentobjekt der übergeordneten Seite abzurufen, und verwenden Sie dann document.getElementById, um das Element mit der angegebenen ID auf der übergeordneten Seite abzurufen. Nachdem Sie die Elemente der übergeordneten Seite erhalten haben, können Sie diese bedienen oder verwenden.

2. ID zur übergeordneten Seite hinzufügen

In der HTML-Datei der übergeordneten Seite müssen Sie dem abzurufenden Element eine ID hinzufügen, damit das Element über die ID auf der untergeordneten Seite abgerufen werden kann. Zum Beispiel:

Elementinhalt der übergeordneten Seite

Durch Hinzufügen einer ID zum Element der übergeordneten Seite können Sie das Dokument problemlos im verwenden Untergeordnete Seite. getElementById, um das Element abzurufen.

2. Verwenden Sie PostMessage für die seitenübergreifende Kommunikation

Zusätzlich zur Verwendung des window.parent-Objekts können Sie PostMessage auch für die seitenübergreifende Kommunikation verwenden, sodass die untergeordnete Seite die Elementdaten der übergeordneten Seite erhalten kann. Die spezifischen Schritte sind wie folgt:

1. Fügen Sie einen PostMessage-Listener zur übergeordneten Seite hinzu

Fügen Sie im JavaScript-Code der übergeordneten Seite den folgenden Code hinzu:

<script><br> //Auf das Nachrichtenereignis hören<br> window.addEventListener('message' , function(event) {</script>

// 获取子页面发送的消息
var message = event.data;

// 查找父页面的元素
var parentElement = document.getElementById('parent-element-id');

// 操作或使用父页面的元素
parentElement.innerHTML = message;

});

Im obigen Code verwenden Sie window.addEventListener, um auf Nachrichtenereignisse zu warten. Wenn die untergeordnete Seite eine Nachricht über PostMessage sendet, kann die übergeordnete Seite das Nachrichtenereignis abhören und die von der untergeordneten Seite gesendete Nachricht abrufen. Nachdem Sie die Nachricht erhalten haben, können Sie basierend auf dem Nachrichteninhalt entsprechende Vorgänge ausführen.

2. Senden Sie eine PostMessage-Nachricht auf der untergeordneten Seite.

Verwenden Sie auf der untergeordneten Seite den folgenden Code, um eine Nachricht an die übergeordnete Seite zu senden:

<script><br> //Eine Nachricht an die übergeordnete Seite senden<br> var message = "This is from the child page message";<br> window.parent.postMessage(message, 'URL of the parent page');<br></script>

Im obigen Code die Nachricht, die an gesendet werden soll Zuerst wird die übergeordnete Seite definiert und dann wird window.parent verwendet. Die Methode .postMessage sendet die Nachricht an die übergeordnete Seite. Es ist zu beachten, dass der zweite Parameter die URL der übergeordneten Seite ist.

Durch die Verwendung von PostMessage für die seitenübergreifende Kommunikation kann die untergeordnete Seite die Elementdaten der übergeordneten Seite flexibler abrufen.

Zusammenfassung:

Dieser Artikel stellt vor, wie man die Elemente der übergeordneten Seite in einer HTML-Unterseite erhält, und stellt spezifische Codebeispiele bereit. Unabhängig davon, ob Sie das window.parent-Objekt von JavaScript verwenden oder PostMessage für die seitenübergreifende Kommunikation verwenden, kann die untergeordnete Seite die Elementdaten der übergeordneten Seite abrufen. Entwickler können geeignete Methoden auswählen, um entsprechende Vorgänge basierend auf den tatsächlichen Anforderungen zu implementieren.

Das obige ist der detaillierte Inhalt vonSo erhalten Sie übergeordnete Seitenelemente von einer HTML-Unterseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!