How to get parent page elements from html subpage

How to get the elements of the parent page in an HTML subpage, you need specific code examples

In developing web pages, sometimes we need to get the elements of the parent page in the subpage , in order to perform some operations or data interaction. This article will introduce how to obtain the elements of the parent page in an HTML subpage and provide specific code examples.

1. Using JavaScript’s window.parent object

In HTML, you can use JavaScript’s window.parent object to obtain elements of the parent page. The specific steps are as follows:

1. Add JavaScript code to the subpage

In the HTML file of the subpage, add the following JavaScript code:

// Get the elements of the parent page
var parentElement = window.parent.document.getElementById('parent-element-id');

// Manipulate or use the elements of the parent page
parentElement.innerHTML = "This is a modification from the child page";

In the above code, first use window.parent to get the document object of the parent page, and then Use document.getElementById to get the element with the specified id in the parent page. After obtaining the elements of the parent page, you can operate or use them.

2. Add id to the parent page

In the HTML file of the parent page, you need to add an id to the element to be obtained so that it can be retrieved by id in the child page. Get the element. For example:

Element content of the parent page

By adding an id to the element of the parent page, it is convenient Use document.getElementById in the subpage to get the element.

2. Use PostMessage for cross-page communication

In addition to using the window.parent object, you can also use PostMessage for cross-page communication, so that the child page can obtain the element data of the parent page. The specific steps are as follows:

1. Add a PostMessage listener to the parent page

In the JavaScript code of the parent page, add the following code:

//Listen to the message event
window.addEventListener('message', function(event) {

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

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

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

});

In the above code, window.addEventListener is used to listen for message events. When the child page sends a message through PostMessage, the parent page can listen through the message event and obtain the message sent by the child page. After getting the message, you can perform corresponding operations based on the message content.

2. Send PostMessage in the child page

In the child page, use the following code to send a message to the parent page:

<script><br> //Send a message to the parent page<br> var message = "This is a message from the child page";<br> window.parent.postMessage(message, 'URL of the parent page');<br></script>> ;

In the above code, the message to be sent to the parent page is first defined, and then the window.parent.postMessage method is used to send the message to the parent page. It should be noted that the second parameter is the URL of the parent page.

By using PostMessage for cross-page communication, the child page can obtain the element data of the parent page more flexibly.

Summary:

This article introduces how to obtain the elements of the parent page in an HTML subpage and provides specific code examples. Whether using JavaScript's window.parent object or using PostMessage for cross-page communication, the child page can obtain the element data of the parent page. Developers can choose appropriate methods to implement corresponding operations based on actual needs.

The above is the detailed content of How to get parent page elements from html subpage. For more information, please follow other related articles on the PHP Chinese website!