[Javascript] Html에서 javascript 또는 css 파일등을 동적으로 로드하는 방법
안녕하세요. 명월입니다.
이 글은 Html에서 javascript 또는 css 파일등을 동적으로 로드하는 방법 대한 설명입니다.
사실 제목은 거창하게 동적으로 로드하는 방법이라고 작성은 했는데 방법은 단순하게 element 추가하는 것입니다. 그러나 그 추가하는 것이 일반 html태그가 아니고 script와 link의 태그를 추가하는 것입니다.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="./dynamic.js"></script>
</head>
<body>
</body>
</html>
input.test{
border: 5px solid red;
height: 100px;
width: 300px;
}
(function(obj){
obj.run();
})((function(){
var dynamicScript = function(src, cb){
// element 추가
var script = document.createElement("script");
// src 어트리뷰트에 경로 추가
script.src = src;
// 비동기식이 아닌 동기식으로 한다.
script.async = false;
// 헤더에 추가
document.head.appendChild(script);
// load가 완료되면 callback을 요청
window.onload = function() {
if(typeof cb === 'function'){
cb.call(this)
}
};
}
var dynamicLink = function(src){
// element 추가
var link = document.createElement("link");
// href 어트리뷰트에 경로 추가
link.href = src;
// 비동기식이 아닌 동기식으로 한다.
link.async = false;
// style일의 기본 어트리뷰트 추가
link.rel = "stylesheet";
link.type = "text/css";
// 헤더에 추가
document.head.appendChild(link);
}
return {
run: function(){
// jquery를 동적으로 추가한다.
dynamicScript("https://code.jquery.com/jquery-3.3.1.min.js", function(){
// jquery가 로드되면 jquery식으로 버튼을 추가한다.
$button = $("<input type=button class='test' value='Add Css File'>");
$("body").append($button);
// 버튼을 클릭하면 dynamic.css를 추가한다.
$button.on("click", function(){
dynamicLink("./dynamic.css");
// 버튼을 새로 추가한다.
$button2 = $("<input type=button class='test' value='remove Css File'>");
$("body").append($button2);
// 새로 추가한 버튼을 클릭하면 link 태그를 삭제시키고 새로추가한 버튼도 삭제시킨다.
$button2.on("click", function(){
$("link[href='./dynamic.css']").remove();
$button2.remove();
});
});
});
}
}
})());
위 예제의 index.html을 보면 빈 html에 단 dynamic.js만 링크를 했습니다. body태그는 아무것도 없습니다. 그리고 실행을 합니다.
결과는 script가 추가가 되었고 버튼이 추가되었습니다. dynamicScript함수의 콜백할 때 jquery 문법을 사용해서 버튼을 추가했기 때문에, 버튼이 있다는 건 jquery 문법이 제대로 실행된다는 뜻이고, 동적 로드가 제대로 된다는 뜻입니다.
여기서 버튼을 누르면 css가 추가됩니다.
link 태그가 추가가 되었고 css의 스타일이 변경되었기 때문에 버튼의 스타일도 변경되었습니다. 즉, 동적으로 적용되어서 스타일이 적용되는 화면입니다.
그리고 새로운 버튼도 추가했습니다. 이 새로 추가된 버튼은 jquery의 remove함수를 써서 추가된 css를 제거해 보겠습니다.
이번에는 link를 제거해 버리니 css적용이 풀리면서 버튼이 원래 모습으로 돌아갑니다.
참고로 css 스타일은 태그의 추가, 제거로도 동적 스타일을 적용할 수 있습니다.그러나 javascript는 동적으로 추가되면 안의 함수와 변수의 데이터가 메모리상으로 로드가 되는 상태가 되기 때문에 적용이 풀리지 않습니다.
예를 들면 jquery를 동적추가를 했지만 $("script").remove()를 써서 jquery를 추가한 script를 제거해도 jquery가 한번 로드된 이상, jquery를 사용할 수 있는 상태로 남아있습니다.
참고 첨부 - 
example.zip
여기까지 Html에서 javascript 또는 css 파일등을 동적으로 로드하는 방법에 대한 설명이었습니다.
궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.
'Development note > Javascript, JQuery, CSS' 카테고리의 다른 글
| [Jquery] $.cookie 사용법 (0) | 2019.11.12 |
|---|---|
| [CSS] 반응형 웹을 만들기 위한 브라우저 사이즈별 css 적용 방법 (0) | 2019.11.05 |
| [Javascript] 팝업 라이브러리(bootbox) (0) | 2019.11.04 |
| [Javascript] 접속 브라우져를 확인하는 방법 (0) | 2019.11.02 |
| [Jquery] Sortable(마우스 드래그 앤 드롭으로 리스트 정렬) (0) | 2019.10.24 |
| [Jquery] 다이얼로그 Dialog (0) | 2019.10.23 |
| [Jquery] 달력 라이브러리 Datepicker (0) | 2019.10.21 |
| [Jquery] CSS로 작성 된 loader 마크 (0) | 2019.10.16 |