일반 HTML 파일에 include/imports 하는 방법

일반 HTML 파일 include/imports 하는 방법

안녕하세요 TriplexLab 입니다. 

정적 파일 html Include하기

오늘은 일반적인 html파일을 Include 하는 방법에 관해서 살펴보도록 하겠습니다.

해당 포스트는

How To Include HTML

위 내용(링크) 참고해서 커스텀 마이징한것 입니다.

<div class="wrapper">
    <!-- [include] header -->
    <header data-include-file="./include/header.html" class="header-wrap includeJs"></header>
    <!-- //[include] header -->
    
    <section class="container">
    </section>

     <!-- [include] header -->
     <header data-include-file="./include/footer.html" class="footer-wrap includeJs"></header>
     <!-- //[include] header -->
</div>

 

<script>
	(function(){
        function includeHtml() {
            const includeTarget = document.querySelectorAll('.includeJs');
            includeTarget.forEach(function(el, idx) {
                const targetFile = el.dataset.includeFile;
                if(targetFile){
                    let xhttp = new XMLHttpRequest();
                
                    xhttp.onreadystatechange = function() {
                        if (this.readyState === XMLHttpRequest.DONE) {
                            this.status === 200 ? (el.innerHTML = this.responseText) : null
                            this.status === 404 ? (el.innerHTML = 'include not found.') : null
                        }
                    }
                    xhttp.open('GET', targetFile, true);
                    xhttp.send();
                    return;
                }
            });
        };

        includeHtml();
    })();
</script>

👉전체 소스코드 공유 (ES6 버전 기준)

include:imports.zip

0.01MB

👉전체 소스코드 (ES6 버전 이전 기준)

전체 소스코드를 github에도 공유합니다.😃🔥

GitHub - younhoso/younhoso