[HTML / JS] Include

include 사용법

include란?

기존에 입력한 소스를 불러와 작업 페이지에서 이미 작업된 페이지를 가져다 활용함

전반적으로 자주 사용되는 반복 구간을 매번 새로운 소스를 입력하여 작업하는건 시간적으로,

프로젝트내에서도 좋지 않고, 소스를 새로입력하는것보다, 기존에 입력되어있는

소스를 리딩하여 해당소스를 공통적으로 통합 관리하기 위해 사용한다.

JS

function includeHTML(){
  let z, elmnt, file, xhttp;

  z = document.getElementsByTagName("*");
  
  for (let i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("data-include");
    
    if (file) {
      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("data-include");
          includeHTML();
        }//if
      }//onreadystatechange

      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }//if - file
  }//for
}//includeHTML

window.addEventListener('DOMContentLoaded',()=>{
  includeHTML();
});

Html에서 include 적용

<header data-include="../common/header.html"></header>

오류

include를 적용하면서

Cannot read properties of null (reading 'addEventListener')

오류가 발생했다

내 예상은 header가 include로 생성되기 전에 header.js가 먼저 로드 되어서

header가 없는 상태로 header을 찾고 있으니 생긴 문제인듯싶었다

해결

include가 먼저 실행될 수 있도록

include.js 에는 DOMContentLoaded, header.js 에는 load를 addEventListener로 적용해 봤는데

해결되지 않았다

다른 해결법들은 오히려 코드가 늘어나고 header을 다른 곳에서 많이 사용하는 것도 아니어서

include를 사용하지 않기로 했다.

Portfolio 프로젝트와 관련된 포스트들

포트폴리오 웹 제작 회고 >

JS에서 이메일 보내기 >

cdn끼리 충돌 날 때 해결법 >

스크롤 시 한 섹션씩 이동 >

JS으로 Include 사용하기! >

자동 무한 이미지 슬라이드 구현 >