본문 바로가기
Programming

[PROGRAMMING] 프로그래밍 (Programming) - HTML 포함(Include HTML)

by 물코더 2021. 10. 19.

코드

· 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();    
}

 

반응형

댓글