jQuery를 이용한 새창에서 부모창 함수 호출
jQuery와 JavaScript를 사용하여 새 창(팝업 창)에서 부모 창의 함수를 호출하려면 window.opener 객체를 활용할 수 있습니다. 이 객체는 새 창이 부모 창을 참조할 수 있게 해주며, 이를 통해 부모 창에 정의된 함수를 호출할 수 있습니다.
예제 코드
1. 부모 창 (parent.html)
부모 창에서는 호출될 함수를 정의합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>부모 창</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
// 부모 창에서 호출될 함수
function parentFunction(message) {
alert("팝업 창에서 메시지를 받았습니다: " + message);
}
// 팝업 창 열기
function openPopup() {
window.open('popup.html', 'popupWindow', 'width=400,height=300');
}
</script>
</head>
<body>
<h1>부모 창</h1>
<button onclick="openPopup()">팝업 창 열기</button>
</body>
</html>
2. 팝업 창 (popup.html)
팝업 창에서는 부모 창의 함수를 호출합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>팝업 창</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 부모 창의 함수 호출
if (window.opener && !window.opener.closed) {
window.opener.parentFunction('Hello from the popup!');
}
// 팝업 창 닫기
$('#closePopup').click(function() {
window.close();
});
});
</script>
</head>
<body>
<h1>팝업 창</h1>
<button id="closePopup">팝업 창 닫기</button>
</body>
</html>
설명
- window.opener: 팝업 창을 열어준 부모 창을 참조합니다.
- window.opener.parentFunction('Hello from the popup!'): 부모 창의 parentFunction 함수를 호출합니다. 이 예제에서는 팝업 창에서 부모 창으로 메시지를 전달하고, 부모 창에서 이를 받아 경고창으로 표시합니다.
- window.close(): 팝업 창을 닫습니다.
이 방법으로 팝업 창에서 부모 창의 함수를 호출할 수 있으며, 부모 창에 정의된 다른 모든 함수나 변수를 사용할 수도 있습니다. 다만, 부모 창과 팝업 창이 같은 도메인 내에 있어야 합니다. 그렇지 않으면 보안 제약으로 인해 window.opener에 접근할 수 없습니다.
#jQuery #javascript #부모창함수호출 #프로그래밍
반응형
'프로그램' 카테고리의 다른 글
| jQuery를 사용하여 몇 번째 요소인지 알아내기 (0) | 2024.09.10 |
|---|---|
| jQuery를 이용한 부모 창 특정 아이템 호출 (0) | 2024.09.08 |
| jQuery를 이용한 브라우저 종료 이벤트 (0) | 2024.09.04 |
| jQuery 새 창에서 부모 창 새로 고침 (0) | 2024.09.02 |
| CSS Star Ratings(별 등급) (0) | 2024.01.18 |
댓글