jQuery로 iframe에서 부모 창의 함수를 호출하려면, JavaScript의 window.parent 객체를 사용할 수 있습니다. window.parent는 iframe의 부모 창을 참조하기 때문에 이를 통해 부모 창의 함수를 호출할 수 있습니다.
예를 들어, 부모 창에 parentFunction이라는 함수가 있다고 가정하면, iframe 내부에서 이 함수를 호출하는 코드는 다음과 같습니다.
부모 창 코드 (parent.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Parent Window</title>
<script>
function parentFunction() {
alert('부모 창의 함수가 호출되었습니다!');
}
</script>
</head>
<body>
<h1>부모 창</h1>
<iframe src="iframe.html" width="300" height="200"></iframe>
</body>
</html>
iframe 코드 (iframe.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe Window</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
// 부모 창의 함수 호출
$('#callParentFunction').click(function() {
window.parent.parentFunction();
});
});
</script>
</head>
<body>
<h1>Iframe</h1>
<button id="callParentFunction">부모 함수 호출</button>
</body>
</html>
설명
- window.parent를 사용하여 부모 창에 접근합니다.
- parentFunction()은 부모 창에 정의된 함수이며, iframe에서 이를 호출하려면 window.parent.parentFunction()을 사용합니다.
- jQuery를 사용하여 버튼 클릭 시 해당 부모 함수가 호출되도록 했습니다.
이 코드는 보안 정책에 따라 다른 도메인에서 호스팅된 페이지 간에는 작동하지 않을 수 있습니다.
same-origin policy를 준수해야 합니다.
반응형
'프로그램' 카테고리의 다른 글
| jQuery를 사용하여 몇 번째 요소인지 알아내기 (0) | 2024.09.10 |
|---|---|
| jQuery를 이용한 부모 창 특정 아이템 호출 (0) | 2024.09.08 |
| jQuery를 이용한 새창에서 부모창 함수 호출 (0) | 2024.09.06 |
| jQuery를 이용한 브라우저 종료 이벤트 (0) | 2024.09.04 |
| jQuery 새 창에서 부모 창 새로 고침 (0) | 2024.09.02 |
댓글