script injection, 동적으로 자바스크립트를 포함 시키자

javascript injection

보통 외부에 javascript를 배포시킬때 script URL만 알려 주는 경우가 있습니다.
그런경우 보통 static  하게 페이지 header  에 <script src="....."/>형식으로 import 하는데,
이럴경우, 페이지 로딩에 미리 영향을 주는 방법입니다.
한마디로, 페이지에 추가한 script 가 모두 로딩되어야한  document.ready  가 되는거죠...
이러한 문제외에도 외부의 script 를 고정적으로 임베딩 하는것 보다는 동적으로 가져와서 사용하는게
더 유리할때가 많습니다. (로딩 속도, 보안, 페이지 구성)

아래가 대표적인 example  입니다.


1. http 로만 비동기적으로 스클립드를 임베딩 한다. (간단하고 전형적인 방법)

<script type="text/javascript">

(function() {

  var s = document.createElement('SCRIPT'), s1 = document.getElementsByTagName('SCRIPT')[0];

  s.type = 'text/javascript';

  s.async = true;

  s.src = 'http://widgets.digg.com/buttons.js';

  s1.parentNode.insertBefore(s, s1);

})();

</script> 

2. 가장 많이 볼수 있는 예제중 하나인 google analytics 스크립트, https도 지원이 가능하도록 된 점이 특히하고, 간단히  
   document.write를 이용하고 있는것도 구글스런 단순함 같습니다.

<script type="text/javascript">

var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");

document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));

</script>

<script type="text/javascript">

try {

var pageTracker = _gat._getTracker("UA-2329634-3");

pageTracker._trackPageview();

} catch(err) {}

</script>

3.  async Load Example 3

    by http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

(function() {
    function async_load(src){
        var s = document.createElement('script');
        s.type = 'text/javascript';
        s.async = true;
        // s.src = 'http://yourdomain.com/script.js';

        s.src = src;

        var x = document.getElementsByTagName('script')[0];
        x.parentNode.insertBefore(s, x);
    }
    if (window.attachEvent)
        window.attachEvent('onload'

                    , async_load('http://yourdomain.com/script.js'));

    else
        window.addEventListener('load'

                    , async_load('http://yourdomain.com/script.js'), false);
})();