HTML 포함 방법

HTML에서 HTML 편집물을 포함하는 방법을 배우세요.

HTML

将要包含的 HTML 保存到 .html 파일에:

content.html

<a href="howto_google_maps.asp">Google Maps</a><br>
<a href="howto_css_animate_buttons.asp">Animated Buttons</a><br>
<a href="howto_css_modals.asp">Modal Boxes</a><br>
<a href="howto_js_animate.asp">Animations</a><br>
<a href="howto_js_progressbar.asp">Progress Bars</a><br>
<a href="howto_css_dropdown.asp">Hover Dropdowns</a><br>
<a href="howto_js_dropdown.asp">드롭다운 클릭</a><br>
<a href="howto_css_table_responsive.asp">반응형 테이블</a><br>

HTML 포함

사용 w3-include-html 속성을 사용하여 HTML 포함:

예제

<div w3-include-html="content.html"></div>

JavaScript 추가

HTML 포함은 JavaScript로 완료됩니다。

예제

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* 모든 HTML 요소 셋을 탐색합니다: */
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /* 특정 속성을 가진 요소를 검색합니다: */
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /* 속성 값으로 파일 이름을 사용하여 HTTP 요청을 보냅니다: */
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML = this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /* 속성 제거하고 이 함수를 다시 호출: */
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /* 함수 탈출: */
      return;
    }
  }
}
</script>

페이지 하단에서 호출 includeHTML()：

예제

<script>
includeHTML();
</script>

직접 시도해 보세요

여러 개의 HTML 단편 포함

다양한 수의 HTML 단편을 포함할 수 있습니다：

예제

<div w3-include-html="h1.html"></div>
<div w3-include-html="content.html"></div>

직접 시도해 보세요