매개 변수가있는 외부 js 파일을 추가하는 방법

Question

위젯을 추가 할 수 있도록 임의의 웹 사이트에 최소한의 js 코드를 제공하고 싶습니다.

코드는 기본 페이지가로드되고 도메인 이름과 함께 매개 변수가 포함 된 후에 실행해야합니다. 이 아니라에서 IE에서 작동

<script type="text/javascript" id="widget_script"> 
    document.getElementById('widget_script').src=location.protocol.toLowerCase()+"//mywebsite.com/?u="+encodeURIComponent(window.location.host);   
</script> 

을 :

하나의 옵션 (그래서 그것은 페이지가로드 한 후 실행) 바로 </body> 전에이 코드를 추가하는 것입니다 (나는 그것을 하드 코드 싶지 않아) Firefox. Firebug에서 src 속성이 올바르게 생성되었지만 내 사이트의 스크립트가로드되지 않았 음을 알 수 있습니다.

내 질문은 : 그게 가장 좋은 방법은 무엇입니까? (헤더 부분에 최소한의 줄을 넣는 것이 좋습니다.)

질문을 명확히하기 위해 : 머리글 부분에 스크립트를 삽입하면로드 된 후 기본 페이지가로드 된 후 어떻게 실행합니까? 스크립트에서 onload 이벤트를 사용하면 onload 이벤트가 실행 된 후로드 될 수 있으므로 놓칠 수 있습니다.

Answer 1

비 차단 스크립트 기술을 구현하고 싶을 것입니다. 기본적으로 스크립트의 src를 수정하는 대신 완전히 새로운 스크립트 요소를 만들고 추가 할 것입니다.

좋은 점은 here이며, YUI 및 jQuery에서이를 수행하는 표준 방법이 있습니다. 그것은 꽤 이해하기 쉽고 (그리고 그 링크에서 문서화 된) 하나의 잡기로 아주 간단합니다.

아, 그리고이 :

이 ... 기술적으로되지 않습니다 :

하나의 옵션 (그래서 그것은 페이지가로드 한 후 를 실행합니다) 단지 </body> 전에이 코드를 추가하는 것입니다 사실 : 스크립트를 로딩 순서의 마지막 것으로 만들기 만하면됩니다.

Answer 2

getScript jQuery 메서드를 사용하여 로딩하지 않는 이유는 무엇입니까? jQuery에 의존하고 싶지 않다면, trace through the source을 사용하여 그들이 어떻게 태클을했는지 알 수 있습니다.

널리 사용되는 라이브러리를 보는 것은 항상 당신이 모르는 문제에 대한 해결책을 보여줄 것입니다. 예를 들어 jQuery가 스크립트가로드 될 때 콜백을 생성하는 방법과 IE에서 메모리 누수가 발생하지 않도록하는 방법을 볼 수 있습니다.

Answer 3

문서와 함께 스크립트를 정적으로 포함 할 수 있습니다.쓰기 (이전 기법이 아니라 더 현대적인 도서관에 문제가 발생할 수로 사용하는 것이 좋습니다) :

var dynamicInclude = document.createElement("script"); 
dynamicInclude.src = url; 
dynamicInclude.type = "text/javascript"; 
document.getElementsByTagName("head")[0].appendChild(dynamicInclude); 

나중에 편집 :

var url = location.protocol.toLowerCase() + 
    "//mywebsite.com/?u="+encodeURIComponent(window.location.host); 
document.write('<script src="', url, '" type="text/javascript"><\/script>'); 

또는를 동적으로 생성 된 DOM 요소와 onload 후 스크립트가 실행되도록하려면 다음을 사용할 수 있습니다.

var oldWindowOnload = window.onload; 
window.onload = function() { 
    oldWindowOnload(); 
    var url = location.protocol.toLowerCase() + 
     "//mywebsite.com/?u="+encodeURIComponent(window.location.host); 
    var dynamicInclude = document.createElement("script"); 
    dynamicInclude.src = url; 
    dynamicInclude.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(dynamicInclude); 
} 

짧은 변수 이름을 제외하고는 이보다 더 짧을 수 있습니다. :)