jQuery를 이용한 부모 창 특정 아이템 호출
팝업 창에서 jQuery를 사용하여 부모 창의 특정 아이템(예: 특정 HTML 요소)을 호출하거나 조작하고 싶다면, window.opener 객체를 이용하여 부모 창의 DOM에 접근할 수 있습니다. 이를 통해 부모 창의 특정 아이템에 접근하고, 이를 조작할 수 있습니다.
예제 코드
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 openPopup() {
window.open('popup.html', 'popupWindow', 'width=400,height=300');
}
</script>
</head>
<body>
<h1>부모 창</h1>
<p id="targetElement">이 텍스트가 팝업 창에서 변경될 것입니다.</p>
<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() {
// 부모 창의 특정 아이템(ID가 targetElement인 요소) 호출 및 변경
if (window.opener && !window.opener.closed) {
window.opener.$('#targetElement').text('팝업 창에서 이 텍스트를 변경했습니다.');
}
// 팝업 창 닫기
$('#closePopup').click(function() {
window.close();
});
});
</script>
</head>
<body>
<h1>팝업 창</h1>
<button id="closePopup">팝업 창 닫기</button>
</body>
</html>
설명
- window.opener: 팝업 창에서 부모 창을 참조합니다.
- window.opener.$('#targetElement'): 부모 창의 jQuery 객체를 사용하여 id가 targetElement인 요소에 접근합니다.
- .text('팝업 창에서 이 텍스트를 변경했습니다.'): 부모 창의 특정 요소의 텍스트를 변경합니다.
주의 사항
- 부모 창과 팝업 창이 같은 도메인 내에 있어야 window.opener 객체에 접근할 수 있습니다.
- 팝업 창이 닫힌 후 window.opener를 사용하려고 하면 오류가 발생할 수 있습니다. 따라서 window.opener가 null이 아니고, 부모 창이 닫히지 않았는지 확인하는 것이 중요합니다.
이 코드를 사용하면 팝업 창에서 부모 창의 특정 아이템을 쉽게 조작할 수 있습니다.
#jQuery #javascript #특정아이템호출 #프로그래밍
반응형
'프로그램' 카테고리의 다른 글
| jQuery로 iframe에서 부모 창 함수 호출 (0) | 2024.09.28 |
|---|---|
| jQuery를 사용하여 몇 번째 요소인지 알아내기 (0) | 2024.09.10 |
| jQuery를 이용한 새창에서 부모창 함수 호출 (0) | 2024.09.06 |
| jQuery를 이용한 브라우저 종료 이벤트 (0) | 2024.09.04 |
| jQuery 새 창에서 부모 창 새로 고침 (0) | 2024.09.02 |
댓글