너와 나의 프로그래밍
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 파일을 삽입 할 수 있다.
'Front-End > JavaScript' 카테고리의 다른 글
| JavaScript - IE에서 Selectbox의 Option Text의 Color가 변하지 않을 때 (0) | 2019.04.26 |
|---|---|
| JavaScript - IE에서 Object.values()를 사용하지 못할 때 (0) | 2018.10.15 |
| JavaScript - Textarea 자동 길이 늘리기. (0) | 2018.08.16 |
| JavaScript - Chrome에서 textbox를 onblur -> focus를 했을 때 무한 루프 현상 (3) | 2018.06.22 |
| JavaScript - Edge 브라우저에서 popup창 사이즈가 안맞는 이슈. (0) | 2018.06.14 |
