HTML DOM iframe 객체는 HTML 문서 내의 <iframe> 요소를 자바스크립트로 다룰 수 있게 해주는 인터페이스입니다. 이 객체를 활용하면 웹 페이지 안에 다른 문서나 콘텐츠를 동적으로 삽입하고 제어할 수 있습니다.
iframe 객체 생성 방법
자바스크립트에서 iframe 객체를 새로 만들려면 다음과 같이 createElement() 메서드를 사용합니다.
document.createElement("IFRAME");iframe 객체의 주요 속성
iframe 객체가 제공하는 대표적인 속성은 아래 표와 같습니다.
| 속성 | 설명 |
|---|---|
| contentDocument | iframe HTML 요소로부터 생성된 document 객체를 반환합니다. |
| contentWindow | iframe HTML 요소로부터 생성된 window 객체를 반환합니다. |
| height | iframe의 height(높이) 속성 값을 반환하거나 수정합니다. |
| name | iframe의 name 속성 값을 반환하거나 수정합니다. |
| sandbox | iframe의 sandbox 속성 값을 반환하거나 변경합니다. 보안 제약 조건을 설정하는 데 사용됩니다. |
| seamless | iframe이 테두리나 스크롤바 없이 웹 페이지의 일부처럼 매끄럽게 보일지 여부를 반환하거나 설정합니다. |
| src | iframe에 로드할 문서의 URL을 지정하는 src 속성 값을 반환하거나 수정합니다. |
| srcdoc | iframe 내부에 직접 렌더링할 HTML 콘텐츠를 지정하는 srcdoc 속성 값을 반환하거나 수정합니다. |
| width | iframe의 width(너비) 속성 값을 반환하거나 변경합니다. |
실전 예제
버튼을 클릭하면 동적으로 iframe을 생성하여 화면에 추가하는 간단한 예제를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<head>
<style>
body{
text-align:center;
}
.btn{
background-color:lightblue;
border:none;
height:2rem;
border-radius:50px;
width:60%;
margin:1rem auto;
}
</style>
</head>
<body>
<h1>DOM IFrame 객체 예제</h1>
<button onclick="createIframe()" class="btn">클릭하면 iframe이 생성됩니다</button>
<script>
function createIframe() {
var x = document.createElement("IFRAME");
x.setAttribute("src", "https://tutorialspoint.com/");
document.body.appendChild(x);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
“클릭하면 iframe이 생성됩니다” 버튼을 누르면 지정한 URL이 로드된 iframe이 페이지 하단에 동적으로 추가됩니다.
정리
HTML DOM iframe 객체는 <iframe> 요소를 프로그래밍 방식으로 생성하고, src, width, height, sandbox 등 다양한 속성을 자유롭게 제어할 수 있도록 도와줍니다. 외부 콘텐츠 임베딩이나 동적 UI 구성 시 유용하게 활용할 수 있습니다.