HTML DOM iframe 객체는 HTML 문서의
이제 iframe 객체를 생성해 보겠습니다 -
구문
다음은 구문입니다 -
document.createElement(“IFRAME”);
속성
다음은 iframe Object의 속성입니다 -
속성 | 설명 |
---|---|
내용문서 | iframe HTML 요소에 의해 생성된 문서 객체를 반환합니다. |
콘텐츠창 | iframe HTML 요소에 의해 생성된 창 개체를 반환합니다. |
높이 | iframe HTML 요소의 height 속성 값을 반환하고 수정합니다. |
이름 | iframe HTML 요소의 name 속성 값을 반환하고 수정합니다. |
샌드박스 | iframe HTML 요소의 sandbox 속성 값을 반환하고 변경합니다. |
원활한 | iframe이 웹 페이지의 일부인 것처럼 매끄럽게 보여야 하는지, 즉 테두리가 없고 스크롤바가 없는지 반환하고 수정합니다. |
src | iframe HTML 요소의 src 속성 값을 반환하고 수정합니다. |
srcdoc | iframe HTML 요소의 srcdoc 속성 값을 반환하고 수정합니다. |
너비 | iframe HTML 요소의 너비 속성 값을 반환하고 변경합니다. |
예시
DOM 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 Object Example</h1> <button onclick="createIframe()" class="btn">Click me to create an iframe</button> <script> function createIframe() { var x = document.createElement("IFRAME"); x.setAttribute("src", "https://tutorialspoint.com/"); document.body.appendChild(x); } </script> </body> </html>
출력
이것은 다음과 같은 출력을 생성합니다 -
"iframe을 만들려면 클릭하세요를 클릭합니다. " 버튼을 눌러 iframe 생성 -