html파일에 html 파일 삽입하기 (head, header, footer 등 겹치는 파일 분리)

열심히 검색해본 결과 (키워드는 js include ... )

JQuery를 이용하는 방법이 있었고

w3.js 에서 제공하는 방법으로 하는 방법도 있었다.

 

위의 경우 모두 실행은 됐는데, 홈페이지 언어변경에 쓰는 i18n js라이브러리랑 사용할 때 이상하게 오류가 나서 홈페이지가 제대로 작동하지 않았다.

또 jquery를 사용한 경우에는 css가 늦게 적용돼서 새로고침 할 때 마다 잠깐 화면이 깨지거나, 적용한 애니메이션이 지멋대로 작동하는 등의 오류가 많았다.

 

찾아본 결과

document.write(`

//코드 막 삽입, 엔터키를 인식하게 하려면 1 왼쪽의 키 특수문자로 따옴표 입력

`)

 

가 제일 깔끔했다.

그래서 해당부분에 다음과 같이 하면 깔끔하게 작동했다.

<!-- html 파일의 일부분 -->
<header id="header">
	<script src = "test.js"></script>
</header>

 

 

 

 

 

//test.js

document.write('


      <li><a href="#about" data-i18n="header:about"></a></li>
      <li><a href="#business" data-i18n="header:business"></a></li>
      <li><a href="#team" data-i18n="header:team"></a></li>

');

//넣고 싶은 html 내용 삽입

이렇게 하는 경우의 문제점은, header부분을 편집하고자 할때 저 부분이 html이 아닌 그냥 text로 인식되기 때문에 모두 같은 색으로 보인다. 편집할 때 가독성이 아주 꽝이라는 것이다. 그리고 파일 관리 면에서도 직관적이지 못하다... 뭔가 불편

그래서 생각한 것이, 저 텍스트를 html 파일로 담고 그것을 불러와서 읽게하면 어떨까... 였다

 

밑의 코드를 적용하여 성공시켰다.

 

loadHTML.js 만든다.

이 코드 출처는 글 맨밑에 적어놓았다.

function loadHTML(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                document.write(allText);
            }
        }
    }
    rawFile.send(null);
}

 

 

이제 원하는 부분 어디에나, 밑의 코드처럼 입력하면 그 파일의 내용이 html에 삽입되게 된다.

  <header id="header" class="fixed-top">
    <script>loadHTML("header.html");</script>
  </header>

 

도움이 되었길 바랍니다.

(왜 코드블럭이 적용이 안되는걸까 ㅠㅡㅠ)
-> 2021.1.22 수정
코드블럭이 적용 안되는 문제는
관리페이지 -> 플러그인 에서 코드관련 플러그인을 설치해야 해결됨!!

 

 

 

출처

https://stackoverflow.com/questions/14446447/how-to-read-a-local-text-file