<nav class="navbar" includeHtml="navbar.html">
</nav>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* 현재 문서 (navbar.html말고)의 모든 요소를 z에 다 가져옴 */
z = document.getElementsByTagName("*");
/* for문으로 elmnt 객체에 하나하나 배열로 넣어줌 */
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/* 2에서 추가한 attribute(불러올 HTML 파일명)를 file에 넣어주고 여부 확인 */
file = elmnt.getAttribute("includeHTML");
if (file) {
/* includeHTML 속성을 가진 개체가 있다면 비동기적 방식인 XMLHttpRequest로 navbar 데이터 요청(가져옴) */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { /* XMLRequest 객체의 상태가 바뀔때 반응하는 이벤트 핸들러 작성 */
/* readyState = XMLRequest 객체의 상태, status = 서버 상태 */
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* 중복 방지를 위해 속성 삭제 뒤 함수 호출 */
elmnt.removeAttribute("includeHTML");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
}
이렇게 하니까 현재 view의 모든 내용이 request됨…
참고 자료 : https://www.w3schools.com/howto/howto_html_include.asp