포스트

HTML 앵커 태그로 열린 새 페이지 닫기

문제 상황

HTML에서 <a> 앵커 태그를 사용하여 새 페이지를 열었을 때, 그 새로 열린 페이지를 어떻게 닫을 수 있는지에 대한 문제입니다. 일반적으로는 브라우저의 닫기 버튼을 눌러야 하는데, 코드로 자동으로 닫을 방법을 찾고자 합니다.

해결 방법 1: JavaScript 사용

새로운 페이지를 열 때 JavaScript의 window.open() 함수를 사용하면, 그 페이지를 닫을 수 있는 창 객체(window object)를 반환합니다. 이 객체를 변수에 저장하여 나중에 window.close() 메서드로 닫을 수 있습니다.

1
2
let newWindow = window.open('https://example.com');
newWindow.close();

해결 방법 2: 자식 페이지에서 부모 페이지 제어

새로 열린 페이지에서도 부모 페이지의 창 객체를 window.opener로 접근할 수 있습니다. 이를 통해 부모 페이지에서 실행할 스크립트를 지정할 수 있으며, 자식 페이지를 닫을 수 있습니다.

1
2
3
// 자식 페이지에서 실행
window.opener = null;
window.close();

주의 사항: Same-origin Policy

위 방법은 모두 Same-origin Policy가 적용되는 경우에만 작동합니다. Same-origin Policy란, 웹 보안 규칙 중 하나로 같은 출처(도메인, 프로토콜, 포트)에서만 자원을 공유할 수 있다는 정책입니다.

정리

HTML 앵커 태그로 새 페이지를 열었을 때, JavaScript를 활용하면 프로그래밍적으로 그 페이지를 닫을 수 있습니다. 단, 보안 규칙에 따라 제약이 있을 수 있으므로 주의가 필요합니다.

이 기사는 저작권자의 CC BY 4.0 라이센스를 따릅니다.