개발 공부중

[jquery] iframe 부모 - 자식 접근 방법 본문

JavaScript

[jquery] iframe 부모 - 자식 접근 방법

개발자 leelee 2024. 6. 11. 21:29

 

iframe을 사용하며 만날 수 있는 다양한 접근방법 정리

 

1. 자식 iframe에서 부모 창의 함수 호출

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
    <script>
        function parentFunction() {
            alert('부모 창의 함수가 호출되었습니다.');
        }
    </script>
</head>
<body>
    <h1>부모 창</h1>
    <iframe id="iframe1" src="child.html"></iframe>
</body>
</html>

 

child.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
    <script>
        function callParentFunction() {
            parent.parentFunction(); // 부모 창의 함수 호출
        }
    </script>
</head>
<body>
    <h1>자식 창</h1>
    <button onclick="callParentFunction()">부모 함수 호출</button>
</body>
</html>

 

2. iframe에서 부모 창의 요소에 접근하고 속성을 변경

parent.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Page</title>
</head>
<body>
    <h1 id="parentHeader">부모 창의 제목</h1>
    <iframe id="iframe1" src="child.html"></iframe>
</body>
</html>

 

child.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Page</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        function changeParentHeader() {
            $(parent.document).find('#parentHeader').text('자식 창에서 변경된 제목');
        }
    </script>
</head>
<body>
    <h1>자식 창</h1>
    <button onclick="changeParentHeader()">부모 요소 변경</button>
</body>
</html>

 

3. iframe에서 부모 창의 다른 iframe 요소에 접근

$("#elementId", parent.frames['otherFrameId'].document)
// iframe에서 부모 창의 다른 iframe(otherFrameId) 내에 있는 #elementId 요소를 찾기

 

4. iframe 내에서 부모 페이지 요소에 접근

$('#parentElementId', parent.document).attr('src', 'newSource');
// iframe 내에서 부모 페이지의 #parentElementId 요소의 src 속성을 newSource로 변경

5. 부모 페이지에서 다른 iframe 접근

$('#elementId', parent.frames["otherIframeId"].document).css('background', 'black');
//부모 페이지에서 다른 iframe(otherIframeId) 내에 있는 #elementId 요소의 배경색을 검은색으로 설정

6. 부모 창에서 자식 iframe의 함수 호출

document.getElementById('iframeId').contentWindow.functionName();
//부모 창에서 iframeId를 가진 iframe 내의 functionName 함수를 호출

iframe을 사용하여 내용을 불러오면 부모 문서와는 독립적인 환경에서 하게된다. contentWindow 속성을 사용해서 부모 문서에서 iframe 문서에 접근하여 내부 함수를 호출할 수 있다.contentWindow는 iframe 요소가 가리키는 Window 객체를 반환한다. 이 객체를 통해 iframe 내부의 함수나 변수에 접근가능하다.

7. 부모 창에서 자식 iframe의 요소 접근

$('#iframeId').contents().find('#elementId')
//부모 창에서 iframeId를 가진 iframe 내의 #elementId 요소찾기

8. 부모 창에서 자식 iframe의 요소 접근 2

window.frames['iframeId'].document.getElementById('elementId');
//부모 창에서 iframeId를 가진 iframe 내의 elementId를 찾기2

9. 부모 창에서 자식 iframe에 값 설정

document.getElementById('iframeId').contentWindow.document.getElementById('elementId').value = 'newValue';
//부모 창에서 iframeId를 가진 iframe 내의 elementId 요소의 값을 newValue로 설정

 

'JavaScript' 카테고리의 다른 글

[JavaScript] 파싱 방지 - 스크립트 태그를 나누어 작성  (0) 2024.07.01
[JavaScript] iframe 부모 - 자식 메시지 전송 Window.postMessage()  (0) 2024.06.13
[JavaScript] 공공 API 사용하여 JSON 가져오는 방법  (0) 2024.05.09
[JavaScript] jQuery serialize() 사용방법  (2) 2024.01.27
[JavaScript] jQuery를 이용한 Ajax 통신  (0) 2024.01.25
'JavaScript' Related Articles more
Comments