0209

박태욱·2022년 2월 11일
  1. 분할했을때 값 가져올때 제일 편한 방법 php 사용
  1. 분할했을때 javascript 사용법 div
    <script src="/nodeground/js/includeHTML.js?v=1"></script>
    <script src="/nodeground/js/includeRouter.js?v=1"></script>

head에 스크립트를 넣어주고

<script>
       window.onload = function () {

       includeHTML( function () {
           includeRouter( function () {
               test();
           });
       });
           HeaderFunc();
   }
</script>

body 밑에 스크립트를 넣어준다 마지막에 실행시키기 위해서

function includeHTML(callback) {
    var z, i, elmnt, file, xhr;
    /*loop through a collection of all HTML elements:*/
    z = document.getElementsByTagName('*');
    for (i = 0; i < z.length; i++) {
        elmnt = z[i];
        /*search for elements with a certain atrribute:*/
        file = elmnt.getAttribute('include-html');
        //console.log(file);
        if (file) {
            /*make an HTTP request using the attribute value as the file name:*/
            xhr = new XMLHttpRequest();
            xhr.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('include-html');
                    elmnt.setAttribute('class', 'includehtml');
                    includeHTML(callback);
                }
            }
            xhr.open('GET', file, true);
            xhr.send();
            /*exit the function:*/
            return;
        }
    }
    setTimeout(function() {
        callback();
    }, 0)
};

includeHTML.js 소스코드

function includeRouter(cb) {
    var content, file, xhttp, i;
    document.body.addEventListener('click', function (e) {
        file = e.target.getAttribute('route-link');
        if (file) {
            content = document.getElementById('acticle_wrap');
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        content.innerHTML = this.responseText;
                        var scripts = content.getElementsByTagName('script');
                        for (var i = 0; i < scripts.length; i++) {
                            eval(scripts[i].text);
                        }
                        setTimeout(function() {
                            cb(e);
                        }, 0)
                    }
                    if (this.status == 404) {
                        content.innerHTML = 'Page not found.';
                    }
                }
            }
            xhttp.open('GET', file, true);
            xhttp.send();
        }
    });
}

includeRouter.js 소스코드

<div include-html="http://nodeground.com/nodeground/code/common/footer.html"></div>

body안에 내용!

iframe은 사용하지 말자!!

profile
개발 노트

0개의 댓글