Programming Language/JavaScript

[JavaScript] 자바스크립트 window.open(), window.opener()

자바스크립트 window.open(), window.opener()

window.open()

window.open() 함수는 새 창(팝업)을 열기 위해 사용되는 JavaScript의 함수이다. 이 함수는 다양한 옵션을 사용하여 새 창을 열 수 있다. 기본적인 사용법은 다음과 같다.

// 기본 사용 방법
window.open("URL", "창 이름", "옵션");

URL - 열고자 하는 새 창의 URL을 지정한다.(JSP나 HTML파일의 경로 될 수 있음)
창 이름 - 새 창에 부여할 이름을 지정한다. 이 이름을 통해 같은 이름을 가진 창이 이미 열려있는지 여부를 확인하고 해당 창에 새로운 내용을 로드할 수 있다.
옵션 - 열리는 창의 속성을 나타내는 문자열이다.

옵션 문자열은 각 속성을 세미콜론(;)으로 구분하며, 다양한 속성을 지정할 수 있다. 몇 가지 예시를 한 번 살펴보자.

"width = 500, height = 500" - 창 너비와 높이를 각각 500px로 지정한다.
"top = 100, left = 100" - 창의 위치를 화면 좌상단에서 100px 아래, 100px 우측으로 지정한다.
"resizeable = no" - 창의 크기를 조절할 수 없도록 지정한다.
"scrollbars = yes" - 스크롤바를 표시한다.

window.opener()

window.opener는 현재 창을 열게 한 창(부모 window 창)에 대한 참조를 제공한다. 이 속성을 통해 현재 창이 열게 된 부모 창에 접근할 수 있다. 예를 들어, 자식 창에서 window.opener를 사용하여 부모 창의 특정 함수를 호출하거나 부모 창의 속성에 접근할 수 있다.

<!-- parent.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parent</title>
</head>
<body>
    <h1>Parent Window</h1>
    <button onclick="openChild()">Open Child Window</button>

    <script>
        function openChild() {
            var childWindow = window.open('child.html', 'ChildWindow', 'width=400, height=300');
        }

        function updateParentMessage(message) {
            document.getElementById('parentMessage').innerText = message;
        }
    </script>
</body>
</html>

<!-- child.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Child</title>
</head>
<body>
    <h1>Child Window</h1>
    <button onclick="sendMessageToParent()">Send Message to Parent</button>

    <script>
        function sendMessageToParent() {
            // 부모 창에 접근하여 함수 호출
            window.opener.updateParentMessage('Hello from Child Window!');
        }
    </script>
</body>
</html>

위 예제에서는 자식 창에서 "Send Message to Parent" 버튼을 클릭하면 sendMessageToParent 함수가 실행되어 부모 창의 updateParentMessage 함수를 호출한다. 이를 통해 부모 창의 메시지가 업데이트 된다. 이러한 방식으로 window.opener를 사용하여 부모 창과 자식 창 간에 상호 작용할 수 있다.

window.opener는 현재 창을 열게 한 부모 창(window)에 대한 참조를 가린키다. 따라서 window.opener를 통해 부모 창의 객체에 접근할 수 있다.

자식 → 부모의 HTML요소 접근(꼭 ID말고 Name이나 Class 등 모두 가능)

window.opener.getElementById("부모 창에서 접근하고 싶은 요소의 아이디")...

자식 → 부모의 함수 접근

window.opener.부모함수이름();

부모 → 자식 HTML요소 접근 and 부모 → 자식창의 함수

let openWindow = window.open('child.html', 'ChildWindow', 'width = 400, height = 300');

// 자식 창의 객체를 변수에 저장해두고 아래와 같이 접근 가능
openWindow.자식창_함수
openWindow.document.getElement...

728x90

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript] geolocation API 기본 사용법(위치 정보 가져오기) (0)	2023.12.11
[JavaScript] 자바스크립트 onclick (0)	2023.11.20
[JavaScript] 자바스크립트 addEventListener (0)	2023.11.17
[JavaScript] 자바스크립트 setTimeout()과 setInterval() 함수 (0)	2023.11.09
[JavaScript] 자바스크립트 Array 객체 (0)	2023.11.05

Contents

새소식

인기 검색어