iframe

Yoon·2023년 12월 20일

어디에 쓰이는고?

  • html 페이지 내에 다른 html를 삽입해서 사용하는 기술
  • 중복되는 코드 방지하고 콘텐츠 영역에서만 변경되게끔 할 때 사용
  • action에 숨겨놓은 iframe을 만들어서 거기에 데이터를 전송해주고 그것의 src를 서버주소로 사용

👉 입력

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div>
      <a href="javascript:goToMenu('./13_iframe_content1.html')">menu1</a>
      <a href="javascript:goToMenu('./13_iframe_content2.html')">menu2</a>
      <a href="">menu3</a>
      <a href="">menu4</a>
      <a href="">menu5</a>
    </div>
    <div>
      <iframe
        src="./13_iframe_content1.html"
        id="ifrm"
        frameborder="0"
      ></iframe>
    </div>
    <div>footer</div>
    <script>
      function goToMenu(path) {
        document.getElementById("ifrm").src = path;
      }
    </script>
  </body>
</html>

🎞 출력

0개의 댓글