빨간색코딩

JS를 이용한 HTML include(header,nav,footer 따로 관리하기) 본문

Web

JS를 이용한 HTML include(header,nav,footer 따로 관리하기)

빨간색소년 2017. 4. 8. 02:55

JS를 이용한 HTML include

HTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 AJAX를 이용해서 해결해보자


1. 사용법

  1. <head>에 <script src="js/includeHTML.js"></script>를 넣어준다.
  2. <body>에 <div include-html="navbar.html"></div>를 넣고 <script>includeHTML();</script>를 호출해준다. 여기서는 navbar를 관리하고 있다.

2. includeHTML.js 코드

function includeHTML() {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
	elmnt = z[i];
    file = elmnt.getAttribute("include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute("include-html");
          includeHTML();
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
}

참조: https://www.w3schools.com/w3css/w3data_home.asp

'Web' 카테고리의 다른 글

자바스크립트 함수 Core (this, arguments, closure, memoization 등)  (1) 2017.07.07
javascript 핵심 기초  (0) 2017.07.07
자바스크립트(JavaScript) 공부하자  (0) 2017.03.16
코드카데미 Learn HTML & CSS: Part I  (0) 2017.03.15
마크다운(markdown)  (0) 2017.03.12
'Web' Related Articles more
Comments