>  기사  >  웹 프론트엔드  >  자바스크립트에서 상위 페이지의 하위 페이지 상태를 얻는 방법

자바스크립트에서 상위 페이지의 하위 페이지 상태를 얻는 방법

PHPz
PHPz원래의
2023-04-25 18:19:08761검색

웹 개발에서 일반적으로 사용되는 시나리오는 상위 페이지가 하위 페이지를 열 때 상위 페이지를 새로 고치는 등의 일부 작업을 수행해야 하는 것입니다. JavaScript를 사용하여 웹 애플리케이션을 작성할 때 해당 작업을 수행할 수 있도록 상위 페이지에서 하위 페이지의 상태를 가져오는 방법을 알아야 합니다.

JavaScript에서는 창 개체를 사용하여 페이지를 열고 닫을 수 있습니다. 새 페이지를 열 때 window.open() 메서드를 사용할 수 있습니다. 이 메서드는 세 가지 매개변수를 받습니다. 첫 번째 매개변수는 열려는 페이지의 주소, 두 번째 매개변수는 창 이름, 세 번째 매개변수는 창의 특성입니다.

예를 들어 다음 코드는 새 창을 열고 창 이름을 "myWindow"로 설정합니다.

var myWindow = window.open("http://www.example.com", "myWindow", "width=500,height=500");

하위 페이지가 닫혔는지 확인하려면 하위 페이지의 window 개체를 사용할 수 있습니다. 하위 페이지에서는 window.onunload 이벤트를 사용하여 페이지가 닫혔는지 감지할 수 있습니다. 페이지가 닫히면 상위 페이지로 메시지를 보낼 수 있습니다.

다음은 하위 페이지에 대한 JavaScript 코드의 예입니다.

window.onunload = function() {
    window.opener.postMessage("childClosed", "*");
}

이 예에서는 하위 페이지가 닫히면 "childClosed"라는 메시지가 상위 페이지로 전송됩니다. 메시지의 매개변수는 문자열이며 무엇이든 될 수 있습니다. 두 번째 매개변수는 메시지의 보낸 사람을 지정하는 소스 매개변수입니다.

상위 페이지에서 이벤트 리스너를 추가하여 하위 페이지의 메시지를 받을 수 있습니다. 메시지가 수신되면 적절한 조치가 수행될 수 있습니다. 다음은 샘플 코드입니다.

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event) {
    if (event.data === "childClosed") {
        // 子页面已关闭,执行相应操作
    }
}

이 코드에서는 메시지가 수신되면 receiveMessage라는 함수가 호출됩니다. 이 함수에서는 메시지가 "childClosed" 문자열인지 확인하고, 그렇다면 적절한 작업을 수행합니다.

일반적으로 상위 페이지에서 JavaScript를 사용하여 하위 페이지가 닫혔는지 확인하려면 하위 페이지에 이벤트 리스너를 추가하여 메시지를 보낸 다음 상위 페이지에 이벤트 리스너를 추가하여 메시지를 수신해야 합니다. 메시지를 표시하고 해당 작업을 수행합니다.

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

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.