JavaScript - HTML에 또 다른 HTML Import 하기
간혹 HTML안에 다른 HTML을 삽입하고 싶은 경우가 종종 생긴다.
JSP 같은 경우는 단순 Include를 시켜주면 되지만, 순수 HTML과 Javascript로 구현하기가 까다롭다.
아래의 예제는 header와 footer를 index.html에서 다른 html을 불러오는 식으로 구현했다.
<!doctype <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<script src="header.js"></script>
<script src="footer.js"></script>
</head>
<body>
<header id = "header"></header>
<div>
나는 메인입니다.
</div>
<footer id = "footer"></footer>
</body>
</html>
이런식으로 잡아놓자.
그리고 스크립트 구문에 헤더(header.js) 푸터(footer.js)를 넣는다.
header.js
$(document).ready(function(){
document.getElementById("header").innerHTML='<object type="text/html" data="header.html"></object>';
})
footer.js
$(document).ready(function(){
document.getElementById("footer").innerHTML='<object type="text/html" data="footer.html"></object>';
})
(header.html, footer.html은 따로 설명 안드립니다... 아무거나 만드시면 됩니다...)
이런식으로 구현하면 한 페이지 안에 다른 html 파일을 삽입 할 수 있다.