[javascript] <script> 요소를 추가 할 수 없습니다

좋은 소식은 :

100 % 효과가 있습니다.

스크립트 태그 안에와 같은 것을 추가하십시오 alert('voila!');. 아마도 “DOM에서 왜 보지 못했습니까?” .

Karl Swedberg는 jQuery API 사이트 에서 방문자의 의견을 잘 설명했습니다 . 내가 하지 , 직접 읽을 수있는 그의 모든 단어를 반복 할 이 여기에 (내가 코멘트를 탐색 할 하드를가 있음) .

모든 jQuery의 삽입 메소드는 내부적으로 domManip 함수를 사용하여 요소를 DOM에 삽입하기 전후에 요소를 정리 / 처리합니다. domManip 함수가 수행하는 작업 중 하나는 삽입 할 스크립트 요소를 가져 와서 나머지 DOM 프래그먼트에 삽입하는 대신 “evalScript 루틴”을 통해 실행하는 것입니다. 스크립트를 개별적으로 삽입하고 평가 한 다음 DOM에서 제거합니다.

jQuery가 수행하는 이유 중 하나는 특정 상황에서 스크립트를 삽입 할 때 Internet Explorer에서 발생할 수있는 “Permission Denied”오류를 방지하기위한 것입니다. 또한 삽입하고 DOM 주위를 이동하는 포함 요소 내에있는 경우 동일한 스크립트를 반복적으로 삽입 / 평가할 수 있습니다 (문제가 발생할 수 있음).

다음은 .append()함수를 사용하여 스크립트를 추가 하여 나쁜 소식이 무엇인지 요약하겠습니다 .

그리고 나쁜 소식은 ..

코드를 디버깅 할 수 없습니다.

난 당신이 추가 할 경우에도, 농담 아니에요 debugger;당신이 중단 점으로 설정할 라인 사이의 키워드, 당신은 소스 코드에 중단 점을 보지 않고 객체의 호출 스택을 그만 둘 수 있습니다 이 있음을 언급 (하지 키워드는 웹킷 브라우저에서만 작동하며 다른 모든 주요 브라우저는이 키워드를 생략 한 것 같습니다 .

코드의 기능을 완전히 이해하면 약간의 단점이 있습니다. 그러나 그렇지 않으면 debugger;코드 (또는 내 코드)에 문제가 있는지 찾기 위해 모든 곳에 키워드 를 추가하게됩니다 . 어쨌든 대안이 있습니다. 자바 스크립트가 HTML DOM을 기본적으로 조작 할 수 있다는 것을 잊지 마십시오.

해결 방법.

jQuery가 아닌 javascript를 사용하여 HTML DOM 조작

디버깅 기능을 잃고 싶지 않다면 자바 스크립트 네이티브 HTML DOM 조작을 사용할 수있는 것보다 낫습니다. 이 예제를 고려하십시오.

var script   = document.createElement("script");
script.type  = "text/javascript";
script.src   = "path/to/your/javascript.js";    // use this for linked script
script.text  = "alert('voila!');"               // use this for inline script
document.body.appendChild(script);

옛날처럼 그렇지 않습니다. 또한 메모리 누수를 방지하기 위해 더 이상 참조되지 않고 참조되지 않는 모든 객체에 대해 DOM 또는 메모리에서 작업을 정리하는 것을 잊지 마십시오. 이 코드를 고려하여 정리할 수 있습니다.

document.body.removechild(document.body.lastChild);
delete UnusedReferencedObjects; // replace UnusedReferencedObject with any object you created in the script you load.

이 해결 방법의 단점은 실수로 중복 스크립트를 추가 할 수 있다는 것입니다. 여기 .append()에서 객체 검증을 추가하기 전에 추가하고 DOM에서 스크립트를 추가 한 직후 제거하여 기능을 약간 모방 할 수 있습니다 . 이 예제를 고려하십시오.

function AddScript(url, object){
    if (object != null){
        // add script
        var script   = document.createElement("script");
        script.type  = "text/javascript";
        script.src   = "path/to/your/javascript.js";
        document.body.appendChild(script);

        // remove from the dom
        document.body.removeChild(document.body.lastChild);
        return true;
    } else {
        return false;
    };
};

function DeleteObject(UnusedReferencedObjects) {
    delete UnusedReferencedObjects;
}

이런 방식으로 스크립트 중복으로부터 안전하면서 디버깅 기능이있는 스크립트를 추가 할 수 있습니다. 이것은 프로토 타입 일 뿐이므로 원하는대로 확장 할 수 있습니다. 나는이 접근법을 사용하고 있으며 이것에 상당히 만족합니다. 물론 jQuery .append()를 사용 하여 스크립트를 추가 하지는 않을 것 입니다.

답변

$ .getScript ( 'http://www.whatever.com/shareprice/shareprice.js', function () {
  Display.sharePrice ();
});

$('#someElement').append('<script>alert("WORKING");</script>');

$('body').append($("<script>alert('Hi!');<\/script>")[0]);

var fileref=document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src","scriptAnalytics.js");
document.getElementsByTagName("head")[0].appendChild(fileref);

var url = 'library.js';
var script = window.parent.frames[1].document.createElement('script' );
script.type = 'text/javascript';
script.src = url;
$('head',window.parent.frames[1].document).append(script);