JavaScript 동적으로 로드

Baw Service 프로젝트 개발 도중 좀 이상한 문제가 발생했었는데..

메인 페이지에 접속 후 다른 페이지 이동한 뒤 다시 메인페이지로 이동하면 메인페이지에 있던 Chartjs가 정상적으로 작동하는데 다른 페이지에서 접속 후 메인페이지로 이동하면 Chartjs가 정상적으로 로드되지 않는 문제가 발생했었다.(..)

그냥 보면 Pjax 문제인거 같지만 그렇다고 pjax를 지워버리면 사이트 속도가 느려지기 때문에 다른 방법으로 해결하는 방법을 1시간만에 찾아냈다!

그냥 간단하게 접속할때마다 head 태그 안 script 태그를 만들어서 스크립트를 로드하고 콜백으로 차트를 로드하는 방식으로 변경하면 된다..

혹시 저와 같은 문제를 겪고 있는 사람들을 위해 함수를 공개합니다.

https://github.com/Baw-Appie/scriptLoader

사용방법

loadScript(url) <-- URL 로드

loadScriptwithCallback(url, callback) <-- URL 로드 후 callback 실행

예를 들면..

loadScript('https://www.google.com/recaptcha/api.js') 으로 recaptcha를 로드할수도 있고

loadScriptwithCallback('https://www.google.com/recaptcha/api.js', function() {

console.log('recaptcha 로드 완료')

})

이런식으로 부려먹는거도 가능합니다.

jsdelivr CDN도 있습니다(..)

https://cdn.jsdelivr.net/gh/Baw-Appie/scriptLoader@0.1/scriptLoader.min.js

잘 사용하시길..