HTML에서 다른 문서 import 하기
HTML의 기능이 막강해지면서 웹사이트를 구축할때 많은 부분이 변화되고 있다.
예전에는 웹사이트를 만들 때 개발자가 서버언어(jsp, asp, php 등)로 개발해서 디자이너가 준 html 코딩을 입히거나 반대로 디자이너가 준 html파일을 개발자가 요리조리 서버언어를 입혀서 만드는 방식이었다.
서버언어로 할 수 있는 것 중에 가장 많이 한 것이 레이아웃을 담당하고 있는 디자인의 공통 선언문들을 include 파일로 분리하여 장기간 유지보수하기 편하도록 개발하는 방식이다.
그런데 요즘 html의 기능들이 막강해지고 ajax, json 등의 서버 언어와 연계할 수 있는 방식들이 발달되면서 프론트엔드 페이지를 굳이 서버언어로 가지 않아도 되는 시대가 왔다.
마치, 무겁게 입고 다니던 코트를 벗고 초경량 구스다운을 입는 것처럼 웹사이트가 매우 가벼워진 것이다.
그러면 이 때, 떠오르는 생각이 있다. 공통페이지들이 선언되는 것들은 어떻게 빼야 하나?
html에도 include가 지원되나??
필자 역시 순간, 그런 생각이 들었는데..
html에도 항상 사용하던 import 기능이 있다는 사실을.......... 잠시 망각했던 것이다.
대부분 이 기능은 css나 javascript를 직접 참조하고 싶을때 많이 사용했으므로.. 떠오르지 않았던 것 같다.
(그래.. 내가 너무 html을 무시하고 있었구나.. 뭐 그런 생각..ㅜㅜ)
html에서 가장 많이 참조하는 파일들은 대체로 jQuery, jQuery-mobile, Bootstrap, ignite 등등..
그 외 각종 css 까지..
모든 html페이지에서 이 많은 것들을 모두 다 선언하고 사용해야 하는거라면 당연히 공통파일로 빼야 한다.
그러기 위해선 아래와 같이 상단에 공통 html 파일을 선언해두고 사용하면 된다.
<head>
<link rel="import" href="/path/to/imports/stuff.html">
</head>
그리고 그 공통파일에는 아래와 같이 쓰면 된다.
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-dropdown.js"></script>
...
<template>
...
</template>
<html>, <head> 이런거 빼고 공통으로 사용할 것들만 넣어주면 끝난 것이다.
그런데 이것은 테스트해본 결과, IE에서는 동작하지 않았다. (정말...안타까운 일이 아닐 수 없다)
동작을 잘 하는지 알아보려면 다음과 같이 스크립트 조건문으로 확인해볼 수 있을 것이다.
if ('import' in document.createElement('link')) {
// 지원하므로 그대로 진행합니다.
} else {
// 파일을 로딩하기 위한 다른 라이브러리나 require 시스템들을 사용하세요.
}
만약, IE 버전에서 html 파일을 import하는 방법이 있거나 공통 레이아웃을 관리하는 페이지를 참조할 수 있는 방법을 아시는 분은 주저없이 댓글로 공유했으면 합니다.
로드/에러 이벤트
<link> 엘리먼트는 import가 성공적으로 로딩되면 load이벤트가 그리고 onerror는 실패가 발생할때 발생한다.
import는 즉시 로딩을 시도하는데 즉시 로드를 피하는 방법은 아래와 같이 onload/onerror 속성을 이용해보자.
<script async>
function handleLoad(e) {
console.log('Loaded import: ' + e.target.href);
}
function handleError(e) {
console.log('Error loading import: ' + e.target.href);
}
</script>
<link rel="import" href="file.html"
onload="handleLoad(event)" onerror="handleError(event)">
주의할점은, 이벤트핸들러가 페이지에서 import가 로딩되기 전에 정의되어야 한다는 점이다. 브라우저는 태그를 맞닥들이자마자 import를 시도하려 하므로 만약 함수가 아직 존재하지 않는다면 정의되지 않은 함수명에 대한 콘솔 에러가 날 수도 있기 때문이다.
동적으로 import를 생성하고자 한다면?
var link = document.createElement('link');
link.rel = 'import';
link.href = 'file.html'
link.onload = function(e) {...};
link.onerror = function(e) {...};
document.head.appendChild(link);
더 많은 html import에 대해 알아보고자 한다면 아래 링크를 타고 가세요.
출처: http://www.html5rocks.com/ko/tutorials/webcomponents/imports/
