HTML include

HTML, CSS 파일로만 작업된 페이지에서 include를 하는 방법

HTML에는 include 기능이 없지만 JavaScript AJAX를 이용하여 인클루드를 할 수 있다.

 

 

HTML

<div data-include-path="footer.html"></div>

 

JS

window.addEventListener('load', function() {
    var allElements = document.getElementsByTagName('*');
    Array.prototype.forEach.call(allElements, function(el) {
        var includePath = el.dataset.includePath;
        if (includePath) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    el.outerHTML = this.responseText;
                }
            };
            xhttp.open('GET', includePath, true);
            xhttp.send();
        }
    });
});

 

var allElements = document.getElementsByTagName('*');

모든 엘리먼트를 찾는다.

 

var inCludePath = el.dataset.inCludePath;

allElements 중 data-include-path의 속성이 붙은 엘리먼트를 찾는다.

 

if(inCludePath){

data-include-path 속성값이 있다면

 

var xhttp = new XMLHttpRequest();

서버에 요청하여 데이터를 받아온다.

 

if(this.readyState == 4 && this.state == 200){

데이터를 정상적으로 받아왔다면

 

el.outerHTML = this.responseText;

outHTML에 데이터를 넣는다.

 

 

 

---

페이지타이틀 변경

인클루드 하면서 페이지 타이틀도 변경

 

HTML

<div class="layout__router" data-include-path="../header.html" data-include-title="PIN 충전/환불"></div>

 

JS

/* layout rounter */
window.addEventListener('load', function() {
    // let allElements = document.getElementsByTagName('*');
    let allElements = document.querySelectorAll(".layout__router");
    Array.prototype.forEach.call(allElements, function(el) {
        let includePath = el.dataset.includePath;
        let includeTitle = el.dataset.includeTitle;
        if (includePath) {
            let xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    el.outerHTML = this.responseText;
                    document.querySelector('.page-title').innerText = includeTitle;
                }
            };
            xhttp.open('GET', includePath, true);
            xhttp.send();
        }

    });
});

 

 

 

 

 

 

---

 

참고:)

https://kyung-a.tistory.com/18

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

 

https://www.w3schools.com/howto/howto_html_include.asp

How To Include HTML