보통 HTML 파일에서 js파일을 불러오려면,
head 영역에 아래와 같이 script태그를 추가하고, src속성으로 js파일의 경로를 설정한다.
<script src="js파일"><script>
* 참고: script태그의 위치 및 async/defer 속성에 대해서는 아래글 참고!
자바스크립트 로드 script 태그: async/defer 비동기 속성
그런데 어떤 이유에 의해서
자바스크립트 코드를 통해 js파일을 따로 로드해야하는 상황이 있을 수 있다.(모듈과는 다소 다른 개념이다)
# 자바스크립트로 html에 다른 js파일을 로드하는 방법
: 1) script엘리먼트를 생성하여, 2)src속성값으로 js파일 경로를 넣어주고, 3) HTML의 head태그에 추가해준다.
1. script 엘리먼트 생성
// 1. script 엘리먼트 생성
const script_element = document.createElement('script');
2. src 속성에 js파일 경로 설정
// 2. script엘리먼트의 src속성값을 "extra.js"로 지정한다.
script_element.setAttribute('src', 'extra.js');
3. HTML의 head태그의 자식으로 추가
// 3. head 태그의 자식으로 scrpt엘리먼트 추가
document.querySelector('head').appendChild(script_element);*** 예제 코드 전문
- index.html 파일
<!DOCTYPE html>
<html lang="ko">
<head>
<title>Document</title>
</head>
<body>
<script>
// 1. script 엘리먼트 생성
const script_element = document.createElement('script');
// 2. src속성값을 설정: "extra.js"로 지정
script_element.setAttribute('src', 'extra.js');
// 3. head 태그의 자식으로 scrpt엘리먼트 추가
document.querySelector('head').appendChild(script_element);
</script>
</body>
</html>
- extra.js 파일
alert('extra.js 파일에서 띄운 팝업입니다');
*** 실행 결과
- 브라우저에서 실행하면 extra.js파일에 작성해둔 팝업이 뜨고,
- 개발자도구로 보면 index.htm파일에 script 태그가 추가되어 있음을 알 수 있다.
이런 기법을 활용하면
프로그램 실행 중에도 원하는 타이밍에 JavaScript 코드를 통해 다른 자바스크립트 파일을 불러올 수 있게 된다.
'개발(Development) > JS(자바스크립트)' 카테고리의 다른 글
| 자바스크립트 버퍼(Buffer): ArrayBuffer, TypedArray 파헤치기! (0) | 2021.11.30 |
|---|---|
| [자바스크립트] HTML에서 특정 텍스트가 포함된 요소(태그)를 클릭하는 방법 (0) | 2021.10.18 |
| [node.js] path 모듈 사용 방법 정리: 파일/디렉터리 경로 처리 (0) | 2021.07.09 |
| [node.js] 현재 파일/디렉터리 경로 확인 방법: __filename, __dirname (0) | 2021.07.09 |
| [자바스크립트] JSON형식 직렬화/역직렬화 방법 (0) | 2021.07.09 |
댓글