<시간/> HTML DOM iframe 객체는 HTML 문서의 요소를 나타냅니다.</P> <p> 이제 iframe 객체를 생성해 보겠습니다 -</P> <h2>구문</h2> <p> 다음은 구문입니다 -</P> <pre>document.createElement(“IFRAME”);</pre> <h2>속성</h2> <p> 다음은 iframe Object의 속성입니다 -</P> <table><thead><tr><th style="text-align:center;">속성 <br> </th> <th style="text-align:center;">설명 <br> </th> </tr> </thead> <tbody><tr><td>내용문서 <br> </td> <td>iframe HTML 요소에 의해 생성된 문서 객체를 반환합니다. <br> </td> </tr> <tr><td>콘텐츠창 <br> </td> <td>iframe HTML 요소에 의해 생성된 창 개체를 반환합니다. <br> </td> </tr> <tr><td>높이 <br> </td> <td>iframe HTML 요소의 height 속성 값을 반환하고 수정합니다. <br> </td> </tr> <tr><td>이름 <br> </td> <td>iframe HTML 요소의 name 속성 값을 반환하고 수정합니다. <br> </td> </tr> <tr><td>샌드박스 <br> </td> <td>iframe HTML 요소의 sandbox 속성 값을 반환하고 변경합니다. <br> </td> </tr> <tr><td>원활한 <br> </td> <td>iframe이 웹 페이지의 일부인 것처럼 매끄럽게 보여야 하는지, 즉 테두리가 없고 스크롤바가 없는지 반환하고 수정합니다. <br> </td> </tr> <tr><td>src <br> </td> <td>iframe HTML 요소의 src 속성 값을 반환하고 수정합니다. <br> </td> </tr> <tr><td>srcdoc <br> </td> <td>iframe HTML 요소의 srcdoc 속성 값을 반환하고 수정합니다. <br> </td> </tr> <tr><td>너비 <br> </td> <td>iframe HTML 요소의 너비 속성 값을 반환하고 변경합니다. <br> </td> </tr> </tbody> </table> <h2>예시</h2> <p> DOM iframe 객체의 예를 살펴보겠습니다 -</P> <pre><!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></pre> <h2>출력</h2> <p> 이것은 다음과 같은 출력을 생성합니다 -</P> <p> <img loading='lazy' alt='HTML DOM iFrame 개체 ' src="/article/uploadfiles/202203/2022033116104880.jpg" /></P> <p> "<strong>iframe을 만들려면 클릭하세요</strong>를 클릭합니다. " 버튼을 눌러 iframe 생성 -</P> <p> <img loading='lazy' alt='HTML DOM iFrame 개체 ' src="/article/uploadfiles/202203/2022033116104844.jpg" /></P> <br> </article> <div class="ad5"> <script language='javascript' src='/ad/w.js'></script> </div> <div id="turn-page" class="text-over"> <a class='LinkPrevArticle' href='https://kr.wsxdn.com/bz024t/hf251z/1002064433.html' >HTML DOM 이미지 객체 </a> <a class='LinkNextArticle' href='https://kr.wsxdn.com/bz024t/hf251z/1002064435.html' >HTML DOM HTML 개체 </a> </div> </section> <aside class="box-r box4-r"> <h3>HTML</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064433.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM 이미지 객체 ">HTML DOM 이미지 객체 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064435.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM HTML 개체 ">HTML DOM HTML 개체 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064523.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM 섹션 객체 ">HTML DOM 섹션 객체 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064524.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM 샘플 개체 ">HTML DOM 샘플 개체 </p> </a> </li><li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064525.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM 인용 객체 ">HTML DOM 인용 객체 </p> </a> </li> </ul> <h3 class="h3-2">컴퓨터</h3> <ul> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064526.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM 진행 객체 ">HTML DOM 진행 객체 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064529.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM 옵션 개체 ">HTML DOM 옵션 개체 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064548.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM 사전 개체 ">HTML DOM 사전 개체 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064643.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM S 객체 ">HTML DOM S 객체 </p> </a> </li> <li> <a href="https://kr.wsxdn.com/bz024t/hf251z/1002064644.html" class="f-start"> <em></em> <p class="r-over r-over-2" title="HTML DOM 첨자 객체 ">HTML DOM 첨자 객체 </p> </a> </li> </ul> </aside> </section> </div> <ul class="types box4-1 container f-center"> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ol244g/' target="_self">C 프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd245y/' target="_self">C++</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/xv246p/' target="_self">Redis</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig247a/' target="_self">BASH 프로그래밍</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ge248y/' target="_self">Python</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/jh249b/' target="_self">Java</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw250q/' target="_self">데이터 베이스</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/hf251z/' target="_self">HTML</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ig252a/' target="_self">JavaScript</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/qo253i/' target="_self">프로그램 작성</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/vs254n/' target="_self">CSS</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/fd255x/' target="_self">Ruby</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ay256s/' target="_self">SQL</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/yw257q/' target="_self">IOS</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/wu258o/' target="_self">Android</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/nl259f/' target="_self">MongoDB</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/mk260e/' target="_self">MySQL</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/ax261s/' target="_self">C＃</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/bz265t/' target="_self">PHP</a></li> <li><a class='childclass' href='https://kr.wsxdn.com/bz024t/zx271r/' target="_self">SQL Server</a></li> </ul> <footer> <section class="container"> <div class="footer-msg"> <span class="container f-center"> <p class=krf>저작권 © <a href="https://kr.wsxdn.com">https://kr.wsxdn.com</a> 모든 권리 보유</p> </span> </div> </section> </footer> </body> </html>
