jQuery로 iframe에서 부모 창 함수 호출

프로그램

jQuery로 iframe에서 부모 창 함수 호출

다온다올과함께 2024. 9. 28. 07:00

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를 준수해야 합니다.

댓글수0