HTML 하위 페이지에서 상위 페이지 요소를 얻는 방법

HTML 하위 페이지에서 상위 페이지의 요소를 가져오는 방법에는 특정 코드 예제가 필요합니다.

웹 페이지를 개발할 때 일부 작업이나 데이터를 수행하기 위해 하위 페이지에서 상위 페이지의 요소를 가져와야 하는 경우가 있습니다. 상호 작용. 이 문서에서는 HTML 하위 페이지에서 상위 페이지의 요소를 얻는 방법을 소개하고 특정 코드 예제를 제공합니다.

1. JavaScript의 window.parent 개체 사용

HTML에서는 JavaScript의 window.parent 개체를 사용하여 상위 페이지의 요소를 가져올 수 있습니다. 구체적인 단계는 다음과 같습니다.

1. 하위 페이지에 JavaScript 코드 추가

하위 페이지의 HTML 파일에 다음 JavaScript 코드를 추가합니다.

<script><br> // 상위 페이지의 요소 가져오기<br> var parentElement = window.parent.document.getElementById('parent-element-id');</script>

// 상위 페이지의 요소 조작 또는 사용
parentElement.innerHTML = "하위 페이지의 수정 사항입니다.";
< ;/script>

위의 코드에서 먼저 window.parent를 사용하여 상위 페이지의 문서 객체를 가져온 다음 document.getElementById를 사용하여 상위 페이지에서 지정된 ID를 가진 요소를 가져옵니다. 상위 페이지의 요소를 얻은 후 해당 요소를 조작하거나 사용할 수 있습니다.

2. 상위 페이지에 ID 추가

상위 페이지의 HTML 파일에서 가져올 요소에 ID를 추가해야 하위 페이지에서 해당 요소를 ID로 가져올 수 있습니다. 예:

상위 페이지의 요소 콘텐츠

상위 페이지의 요소에 ID를 추가하면 다음에서 문서를 쉽게 사용할 수 있습니다. 하위 페이지에서 getElementById를 사용하여 요소를 가져옵니다.

2. 페이지 간 통신에 PostMessage 사용

window.parent 개체를 사용하는 것 외에도 페이지 간 통신에 PostMessage를 사용할 수도 있으므로 하위 페이지가 상위 페이지의 요소 데이터를 얻을 수 있습니다. 구체적인 단계는 다음과 같습니다.

1. 상위 페이지에 PostMessage 리스너 추가

상위 페이지의 JavaScript 코드에 다음 코드를 추가합니다.

<script><br> //메시지 이벤트 수신<br> window.addEventListener('message' , function(event) {</script>

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

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

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

});

위 코드에서 window.addEventListener를 사용하여 메시지 이벤트를 수신합니다. 하위 페이지가 PostMessage를 통해 메시지를 보내면 상위 페이지는 메시지 이벤트를 통해 수신 대기하고 하위 페이지에서 보낸 메시지를 얻을 수 있습니다. 메시지를 획득한 후 메시지 내용에 따라 해당 작업을 수행할 수 있습니다.

2. 하위 페이지에 PostMessage 메시지 보내기

하위 페이지에서 다음 코드를 사용하여 상위 페이지에 메시지를 보냅니다.

<script><br> //상위 페이지에 메시지 보내기<br> var message = "하위 페이지 메시지에서 온 것입니다";<br> window.parent.postMessage(message, '상위 페이지의 URL');<br></script>

위 코드에서 상위 페이지가 먼저 정의된 후 window.parent가 사용됩니다. .postMessage 메소드는 상위 페이지에 메시지를 보냅니다. 두 번째 매개변수는 상위 페이지의 URL이라는 점에 유의하세요.

페이지 간 통신을 위해 PostMessage를 사용하면 하위 페이지가 상위 페이지의 요소 데이터를 보다 유연하게 얻을 수 있습니다.

요약:

이 문서에서는 HTML 하위 페이지에서 상위 페이지의 요소를 가져오는 방법을 소개하고 특정 코드 예제를 제공합니다. JavaScript의 window.parent 개체를 사용하든 페이지 간 통신을 위해 PostMessage를 사용하든 하위 페이지는 상위 페이지의 요소 데이터를 얻을 수 있습니다. 개발자는 실제 요구 사항에 따라 해당 작업을 구현하는 데 적절한 방법을 선택할 수 있습니다.

위 내용은 HTML 하위 페이지에서 상위 페이지 요소를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!