JS를 이용한 HTML include(header,nav,footer 따로 관리하기)
JS를 이용한 HTML include
HTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 AJAX를 이용해서 해결해보자
1. 사용법
- <head>에 <script src="js/includeHTML.js"></script>를 넣어준다.
- <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
출처: https://sjh836.tistory.com/52?category=687142 [빨간색코딩]
'Javascript > JavaScript' 카테고리의 다른 글
| ECMAScript 6 (0) | 2021.03.23 |
|---|---|
| V8 javascript 엔진 (Hidden Class, 인라인캐싱, 메모리구조, 호출스택, heap, GC) (0) | 2021.03.23 |
| Client(브라우저) Javascript (DOM API, data-, event, ajax) (0) | 2021.03.23 |
| 자바스크립트 함수 Core (this, arguments, closure, memoization 등) (0) | 2021.03.23 |
| 자바스크립트(JavaScript) 공부 (0) | 2021.03.23 |
| [JavaScript] 이벤트 타입 (0) | 2020.07.07 |
| [JavaScript] 이벤트 등록방법 (0) | 2020.07.07 |
| [JavaScript] 이벤트 (0) | 2020.07.07 |