<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은 사용하지 말자!!