import html

 

---

개발을 하다 보면 여러 html 소스 코드 안에 중복된 html 소스코드를 사용해야 할 경우들이 있습니다.

이럴 경우 중복된 소스 코드를 피하기 위해서 어떻게 할 수 있을까요?

html 안의 html 넣는 방법에 대해서 알아 보겠습니다.

 

1. w3schools 에서 소개하는 방법

자바스크립트를 사용해서 html 파일을 넣는 방법 입니다.

https://www.w3schools.com/howto/howto_html_include.asp

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

<script>
function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /* Loop through a collection of all HTML elements: */
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /* Make an HTTP request using the attribute value as the file name: */
      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.";}
          /* Remove the attribute, and call this function once more: */
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /* Exit the function: */
      return;
    }
  }
}
</script>

includeHtml 이라는 함수를 만들어서 자바스크립트로 동적으로 로드 하는 방법 입니다. 모두가 포함되는 자바스크립트 파일을 하나 만들어서 includeHtml 함수를 호출하여 사용하면 되겠죠?

 

2. jquery load 함수 이용

jquery와 html을 삽입할 태그 위치만 잡아주면 한줄에 해결 할수 있습니다.

$("삽입할 위치 선택자").load("example.html")

load 함수를 사용 하여 쉽게 구현 할 수 있습니다.

 

이외에 web Components를 이용하는 방법과 iframe을 이용하는 방법이 있습니다.

이 내용은 밑에 링크에서 다루도록 하겠습니다.

https://blog.naver.com/world9604/221957513416

include html