728x90
1. <iframe> 기본 사용법
iframe은 웹페이지 내에 다른 HTML 문서를 삽입할 수 있도록 하는 태그입니다.
기본 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>iframe 예제</title>
</head>
<body>
<h2>iframe 기본 예제</h2>
<iframe id="myIframe" src="iframe-content.html" width="600" height="400"></iframe>
</body>
</html>
위의 예제는 iframe을 생성하고 iframe-content.html 파일을 로드하는 간단한 예제입니다.
2. JavaScript와 jQuery로 iframe 내부 접근
iframe 내부 문서의 요소를 조작하려면 iframe의 contentWindow 또는 contentDocument를 사용해야 합니다.
✅ JavaScript 방식
<script>
function changeIframeContent() {
var iframe = document.getElementById('myIframe');
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// 내부의 특정 요소 변경
iframeDoc.getElementById('innerText').innerText = "부모 창에서 변경됨!";
}
</script>
<button onclick="changeIframeContent()">iframe 내부 변경</button>
✅ jQuery 방식
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function changeIframeContentWithJQuery() {
var iframe = $('#myIframe')[0];
var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
// jQuery로 iframe 내부의 요소 조작
$(iframeDoc).find('#innerText').text("부모 창에서 jQuery로 변경됨!");
}
</script>
<button onclick="changeIframeContentWithJQuery()">iframe 내부 변경 (jQuery)</button>
▶ iframe-content.html (내부 페이지)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>iframe 내부</title>
</head>
<body>
<h3>이곳은 iframe 내부</h3>
<p id="innerText">이 텍스트를 변경해보세요.</p>
</body>
</html>
3. iframe 내부에서 부모 창 접근하기
반대로 iframe 내부에서 부모 창의 요소를 조작할 수도 있습니다.
✅ JavaScript 방식
<script>
function changeParentContent() {
parent.document.getElementById('parentText').innerText = "iframe에서 부모 창 변경!";
}
</script>
<button onclick="changeParentContent()">부모 창 변경</button>
✅ jQuery 방식
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function changeParentContentWithJQuery() {
$(parent.document).find('#parentText').text("iframe에서 jQuery로 부모 창 변경!");
}
</script>
<button onclick="changeParentContentWithJQuery()">부모 창 변경 (jQuery)</button>
▶ 부모 창의 HTML 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>부모 창</title>
</head>
<body>
<h2>부모 창</h2>
<p id="parentText">이 텍스트가 iframe에서 변경됩니다.</p>
<iframe id="childIframe" src="iframe-content.html" width="600" height="400"></iframe>
</body>
</html>
4. 정리
| 접근 방향 | JavaScript 방식 | jQuery 방식 |
| 부모 → iframe 내부 | contentDocument.getElementById() | $(iframeDoc).find('#id') |
| iframe → 부모 | parent.document.getElementById() | $(parent.document).find('#id') |
이렇게 하면 iframe 내부 요소를 변경하거나, 내부에서 부모 창을 조작할 수 있습니다.
iframe을 사용할 때 same-origin policy(동일 출처 정책)에 주의해야 하며, 다른 도메인의 iframe 접근은 CORS 문제로 제한될 수 있습니다.
LIST
'Develop' 카테고리의 다른 글
| [jQuery] click과 touchend 차이점 및 주의사항 (2) | 2025.02.07 |
|---|---|
| [PostgreSQL] EXISTS 쿼리 사용법과 예제 (0) | 2025.02.06 |
| SQL INSERT 문에서 싱글 쿼테이션 입력하는 방법 (1) | 2025.02.05 |
| [PostgreSQL] 순차적으로 증가하는 숫자형 컬럼 중간에 비어있는 값(누락된 값)을 조회 (2) | 2025.02.04 |
| [PostgreSQL] UNIQUE Key 생성 방법 총정리 (0) | 2025.02.04 |