[활용팁] 동적으로 공통 메서드 불러와서 실행하기 예제(Javascript, 동적실행)

 

대형 프로젝트를 할 경우 선택한 값에 해당하는 자바스크립트 파일을 다르게 불러오고 싶을 때가 있다...

 

이럴때 활용하면 유용한 팁을 소개 한다.

 

다이나믹한 자바스크립트를 위해...

 

동영상을 일단 보면...

 

 

선택박스가 변경이 되면 해당 자바스크립트 파일을 불러와서 실행해 주는 동영상이다..

 

이 기능의 핵심은 자바스크립트 태그를 생성해서 불어오면 완벽하게 구현이 가능하다.

 

그럼 소스를 보자..

function loadJavascript(url, charset) {
	var jshtml = document.getElementsByTagName('jsload')[0];
	var script= document.createElement('script');
	script.type= 'text/javascript';
	script.charset = "euc-kr";

	jshtml.innerHTML = "";		// 기존 스크립트 제거

	var loaded = false;
	script.onreadystatechange= function () {
		if (this.readyState == 'loaded' || this.readyState == 'complete') {
			if (loaded) {
				return;
			}
			loaded = true;
		}
	}
	script.onload = function () {
		// 로드완료
		CommMethod();			// 공통 메서드 실행하기
	}
	script.src = url;
	jshtml.appendChild(script);
}

function LoadScript(selVal) {
	switch(selVal) {
		case "1" :			// 첫번째 스크립트
			loadJavascript("js_1.js", "euc-kr");
			break;
		case "2" :			// 두번째 스크립트
			loadJavascript("js_2.js", "euc-kr");
			break;
		case "3" :			// 세번째 스크립트
			loadJavascript("js_3.js", "euc-kr");
			break;
	}
}

이렇게 구현을 하면 된다..

 

이런 jsload 라는 태그는 존재 하지 않는데 작동하는것을 보면...

HTML 문법에서는 태그는 변수 여서 활용할 가치가 무궁무진 한듯 하다..

var jshtml = document.getElementsByTagName('jsload')[0];

결국 <jaload></jsload> 태그 안에 자바스크립트 태그를 생성해서 실행해주는 역활을 한다.

 

이렇게 메인 소스를 보면 별것 없지만...

 

동적으로 자바스크립트 공통 메서드를 실행 할수 있는 원리이다.

 

<script>

function SelectValue() {
	var f = document.MForm;

	LoadScript(f.jsNum.value);
}
</script>

<jsload></jsload>

<form name="MForm">
<select name="jsNum">
	<option value="1" selected>첫번째 스크립트 실행</option>
	<option value="2">두번째 스크립트 실행</option>
	<option value="3">세번째 스크립트 실행</option>
</select>
</form>
<input type="button" value="자바스크립트 확인" onclick="SelectValue();">

 

 

 

예제 소스 다운로드 하기

 

https://blog.naver.com/spprince/222402734703

 

#활용팁 #javascript #자바스크립트 #jQuery #동적실행 #스크립트로드

 

---

 

본 블로그의 글은 공공정보와 개인적 생각의 글 임을 알려드립니다.

또한 오류가 있는 부분이 있으면 댓글로 알려주시기 바랍니다.

 

감사합니다.