Comment obtenir des éléments de page parent à partir d'une sous-page HTML

Comment obtenir les éléments de la page parent dans une sous-page HTML nécessite des exemples de code spécifiques

Lors du développement de pages Web, nous avons parfois besoin d'obtenir les éléments de la page parent dans la sous-page afin d'effectuer certaines opérations ou données interaction. Cet article expliquera comment obtenir les éléments de la page parent dans une sous-page HTML et fournira des exemples de code spécifiques.

1. Utilisez l'objet window.parent de JavaScript

En HTML, vous pouvez utiliser l'objet window.parent de JavaScript pour obtenir les éléments de la page parent. Les étapes spécifiques sont les suivantes :

1. Ajouter du code JavaScript à la sous-page

Dans le fichier HTML de la sous-page, ajoutez le code JavaScript suivant :

<script><br> // Récupérer les éléments de la page parent<br> var parentElement = window. parent.document.getElementById('parent-element-id');</script>

// Manipuler ou utiliser des éléments de la page parent
parentElement.innerHTML = "Ceci est une modification de la page enfant";
< ;/script>

ci-dessus Dans le code, utilisez d'abord window.parent pour obtenir l'objet document de la page parent, puis utilisez document.getElementById pour obtenir l'élément avec l'identifiant spécifié dans la page parent. Après avoir obtenu les éléments de la page parent, vous pouvez les exploiter ou les utiliser.

2. Ajouter un identifiant à la page parent

Dans le fichier HTML de la page parent, vous devez ajouter un identifiant à l'élément à obtenir, afin que l'élément puisse être obtenu par identifiant dans la page enfant. Par exemple :

Contenu de l'élément de la page parent

En ajoutant un identifiant à l'élément de la page parent, vous pouvez facilement utiliser le document dans le page enfant. getElementById pour obtenir l’élément.

2. Utilisez PostMessage pour la communication entre pages

En plus d'utiliser l'objet window.parent, vous pouvez également utiliser PostMessage pour la communication entre pages, afin que la page enfant puisse obtenir les données d'élément de la page parent. Les étapes spécifiques sont les suivantes :

1. Ajouter un écouteur PostMessage à la page parent

Dans le code JavaScript de la page parent, ajoutez le code suivant :

<script><br> //Écouter l'événement message<br> window.addEventListener('message' , function(event) {</script>

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

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

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

});

Dans le code ci-dessus, utilisez window.addEventListener pour écouter les événements de message. Lorsque la page enfant envoie un message via PostMessage, la page parent peut écouter l'événement de message et obtenir le message envoyé par la page enfant. Après avoir obtenu le message, vous pouvez effectuer les opérations correspondantes en fonction du contenu du message.

2. Envoyer un message PostMessage dans la page enfant

Dans la page enfant, utilisez le code suivant pour envoyer un message à la page parent :

<script><br> //Envoyer un message à la page parent<br> var message = "Ceci provient du message de la page enfant";<br> window.parent.postMessage(message, 'URL de la page parent');<br></script>

Dans le code ci-dessus, le message à envoyer à la la page parent est d'abord définie, puis window.parent est utilisé. La méthode .postMessage envoie le message à la page parent. A noter que le deuxième paramètre est l'URL de la page parent.

En utilisant PostMessage pour la communication entre pages, la page enfant peut obtenir les données d'élément de la page parent de manière plus flexible.

Résumé :

Cet article présente comment obtenir les éléments de la page parent dans une sous-page HTML et fournit des exemples de code spécifiques. Que ce soit en utilisant l'objet window.parent de JavaScript ou en utilisant PostMessage pour la communication entre pages, la page enfant peut obtenir les données d'élément de la page parent. Les développeurs peuvent choisir des méthodes appropriées pour mettre en œuvre les opérations correspondantes en fonction des besoins réels.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!