코드
· HTML, 자바스크립트(Javascript)
기능
· 외부 HTML 코드를 특정 위치에 삽입
1. HTML
· include-html : HTML 코드 삽입을 위한 커스텀 속성
<body>
<main id="target" include-html="content.html">
<!-- # "content.html" HTML 코드 삽입 영역 -->
</main>
</body>
2. 자바스크립트
· includeHTML 함수 호출 시, includeHTML 종료 콜백(completed) 매개변수 사용
· includeHTML 함수 호출을 통해 main#target 노드 하위에 content.html 페이지 안의 내용을 삽입
// HTML 포함 함수 (Include HTML)
function includeHTML( completed )
{
// 모든 노드 (*) 선택 및 파싱
var elem, file, xhr;
var elemAll = document.getElementsByTagName("*");
for ( var i = 0; i < elemAll.length; i ++ )
{
// 노드
elem = elemAll[i];
// 노드의 속성('include-html') 값 file 저장
file = elem.getAttribute("include-html");
// file(include-html) 값 유무 판별
if ( file )
{
// XMLHttpRequest
xhr = new XMLHttpRequest();
// XMLHttpRequest onreadystatechange 이벤트 바인드
xhr.onreadystatechange = function() {
// readyState == 4, XMLHttpRequest 응답 완료(done)
if ( this.readyState == 4 )
{
if (this.status == 200) {
// 성공(200, success) 시 파일 응답(HTML 코드) 삽입
elem.innerHTML = this.responseText;
}
// 완료
elem.removeAttribute("include-html"); // include-html 속성 삭제
includeHTML(completed); // 재귀함수(반복). 다음 include-html 검사
}
return;
};
// XMLHttpRequest 요청 / 응답
xhr.open("GET", file, true);
xhr.send();
return; // 함수(includeHTML) 종료
}
}
// include-html 속성을 가진 노드가 없는 경우, 콜백(completed) 실행
if ( document.querySelectorAll( "*[include-html]" ).length == 0 && completed ) completed();
}
반응형
'Programming' 카테고리의 다른 글
| [PROGRAMMING] 프로그래밍 (Programming) - DOM-TO-IMAGE (0) | 2021.10.28 |
|---|---|
| [PROGRAMMING] 프로그래밍 (Programming) - 이미지 변환(Image Transform) 02 (0) | 2021.10.18 |
| [PROGRAMMING] 프로그래밍 (Programming) - 이미지 변환(Image Transform) 01 (0) | 2021.10.17 |
| [PROGRAMMING] PHP - SMTP(with. PHPMailer) (0) | 2021.10.13 |
| [PROGRAMMING] PHP - STRLEN, STRPOS, SUBSTR, STRTOLOWER, STRTOUPPER, TRIM, EXPLODE, IMPLODE, STRCMP (0) | 2021.10.12 |
댓글