innerHTML_javascript 기술에 삽입된 스크립트를 실행하는 코드

Ajax 프로그래밍을 할 때 xmlhttp로 얻은 페이지 콘텐츠를 innerHTML을 통해 컨테이너(예: p, span 또는 td 등)에 할당해야 하는 경우가 많습니다. innerHTML에 할당하십시오. 페이지 내용에 스크립트가 포함되어 있으면 외부 스크립트이든 내부 스크립트이든 (1)이 실행되지 않을 수 있습니다. 때로는 이 문제가 사소하여 무시할 수도 있지만 때로는 이 문제가 매우 심각하여 프로그램이 예상한 결과를 얻지 못할 가능성이 높습니다. 그래서 우리는 이 문제를 해결해야 합니다.

MSDN을 읽어보면 innerHTML에 삽입된 모든 스크립트를 실행할 수 없는 것을 알 수 있습니다. 이 스크립트의 스크립트 태그에 defer 속성이 포함되어 있으면 IE는 이러한 스크립트를 올바르게 실행합니다. 그러나 불행하게도 Moziila/Firefox 및 Opera는 스크립트 태그에 defer 속성이 설정되어 있는지 여부에 관계없이 IE처럼 innerHTML에 삽입된 스크립트를 실행하지 않습니다.

그러나 스크립트 실행 여부에 관계없이 우리가 확신할 수 있는 한 가지는 이러한 스크립트가 실제로 innerHTML에 삽입되었다는 것입니다. 믿을 수 없다면 경고하고 살펴보세요. 그러나 실제로 주의를 기울이면 예외가 있음을 발견할 수도 있습니다. 즉, 스크립트가 innerHTML 콘텐츠의 시작 부분에 있으면 IE 브라우저는 이 스크립트를 무시하지만 Moziila/Firefox 및 Opera는 무시하지 않습니다.

자, 문제 분석이 거의 완료되었습니다. 해결 방법을 살펴보겠습니다.

해결 방법은 실제로 매우 간단합니다. 즉, innerHTML에 삽입된 모든 스크립트를 꺼내어 하나씩 실행하는 것입니다. 하지만 먼저 위의 두 가지 문제를 해결해야 합니다.

먼저 첫 번째 질문인 IE의 innerHTML에서 defer 속성을 사용하여 스크립트를 반복적으로 실행하지 않는 방법을 살펴보겠습니다. 이것은 쉽습니다. 먼저 브라우저가 IE인지 확인한 다음 실행할 스크립트에 defer 속성이 있는지 확인하면 됩니다. IE 브라우저를 판단할 때 오페라의 브라우저 인식에 속지 않도록 주의해야 합니다. 아래 코드에서 이것이 어떻게 수행되는지 살펴보겠습니다.

다음으로 IE에서 innerHTML 시작 부분의 스크립트를 무시하는 문제를 살펴보겠습니다. 이 문제도 해결하기 쉽습니다. innerHTML에 삽입하려는 콘텐츠의 시작 부분에 스크립트가 아닌 콘텐츠를 추가하기만 하면 작업이 완료됩니다. 그러나 빈 내용이나 공백, 캐리지 리턴, 줄 바꿈 등이 포함된 태그를 추가하지 마십시오. 작동하지 않으며 시작 부분의 스크립트는 계속 무시됩니다. 를 추가하려고 시도하지 마십시오. 이렇게 하면 시작 스크립트가 무시되는 것을 방지할 수 있지만 원본 콘텐츠 표시에는 여전히 영향을 미칩니다. 비록 명확하지 않다고 생각할 수도 있지만 까다로운 사용자에게는 허용되지 않을 수 있습니다. 따라서 추가 콘텐츠가 오프닝 스크립트가 무시되는 것을 방지하고 부작용을 일으키지 않도록 다음 콘텐츠를 추가합니다.


위 내용은 일정 길이임에도 불구하고 표시되지 않으며, 삽입된 태그에는 ID나 이름이 없으므로 원본 콘텐츠의 일부 태그와 동일하지 않습니다. 갈등. 그러나 여기서 주의할 점이 하나 있습니다. 일부 다른 브라우저에서는 디스플레이를 지원하지 않을 수 있으므로 IE인지 확인한 다음 이 콘텐츠를 추가할지 여부를 결정해야 합니다. CSS 수정이 없는 경우(예: Opera Mini) 이것을 추가하세요. 이 코드는 최종 디스플레이 효과에 영향을 미칩니다.

스크립트를 어떻게 꺼내서 실행하는지 살펴보겠습니다.

스크립트 제거는 쉽습니다. innerHTML이 있는 개체의 getElementsByTagName 메서드를 사용하면 됩니다. 이 방법은 거의 모든 컨테이너 태그에 적용됩니다. 스크립트를 꺼낸 후 외부 스크립트인지 내부 스크립트인지 하나씩 확인해야 합니다.

먼저 외부 스크립트를 살펴보겠습니다. 외부 스크립트인 경우 먼저 외부 스크립트의 복사 객체를 생성하고 defer 속성을 true로 설정하는 방법을 선택했습니다. (이는 IE 브라우저가 올바르게 실행할 수 있도록 하기 위함입니다.) 를 클릭한 다음,appendChild 메서드를 사용하여 이 복사 개체를 head에 삽입합니다. 여기서 질문하실 수 있습니다. innerHTML이 있는 개체에 삽입해 보는 것은 어떨까요? innerHTML이 있는 객체에 삽입하는 것이 더 좋지 않을까요? 사용해보시면 innerHTML이 위치한 객체에 삽입하면 IE 브라우저에서는 문제가 없으나 Mozilla/Firefox, Opera 브라우저에서는 약간의 문제가 발생한다는 것을 아실 겁니다. 문제는 Firefox에서 이 작업을 수행하면 브라우저가 응답하지 않는다는 것입니다(Firefox 1.5의 테스트 결과이며 다른 버전에서도 이 문제가 발생하는지 알 수 없음). Opera에서는 스크립트가 설명할 수 없을 정도로 두 번 실행됩니다( 이는 Opera 8.5에서의 테스트 결과입니다. 다른 버전의 Opera에도 이 문제가 있는지는 아직 알 수 없습니다. 이러한 문제를 피하기 위해 헤드에 삽입하기로 결정했습니다.

내부 스크립트를 살펴보겠습니다. 내부 스크립트의 내용은 스크립트 개체의 text 속성을 사용하여 직접 얻을 수 있습니다. Opera 브라우저, 스크립트 개체 innerHTML 속성은 비어 있으며 텍스트 속성만 사용하여 스크립트 콘텐츠를 얻을 수 있습니다. 내부 스크립트를 실행하려면 eval을 사용하면 됩니다. 하지만 HTML의 주석 태그에 스크립트가 포함될 수 있으므로 먼저 주석 태그를 제거해야 합니다. 그렇지 않으면 IE에서 오류가 발생합니다.

위의 분석은 완벽해 보이지만 사실 여전히 문제가 있습니다. 하나는 document.write 및 document.writeln의 문제입니다. 이 문제는 Bound0에서 이를 대체하는 아이디어를 제공합니다. document.write 및 document.writeln 메소드는 기본이지만 문자열 대체를 사용하므로 내부 스크립트에만 유효하고 외부 스크립트에는 유효하지 않습니다. 따라서 document write를 직접 대체하는 보다 일반적인 방법을 생각했습니다. document.writeln이 재정의되어 내부 스크립트가 실행되든 외부 스크립트가 실행되든 우리는 document.write와 document.writeln을 직접 정의합니다. 그러나 부작용도 있습니다. 즉, 이 두 기능은 이전처럼 현재 페이지에서 사용할 수 없습니다. 그러나 이 두 기능은 일반적으로 페이지가 로드된 후에는 사용되지 않으므로 다음은 이로 인해 발생하는 부작용입니다. 재정의하면 영향이 최소화됩니다. 그러나 또 다른 문제는 그럼에도 불구하고 document.write 또는 document.writeln에 의해 출력된 콘텐츠가 가장 적절한 위치에 표시될 것이라고 보장할 수 없다는 것입니다. 콘텐츠를 배치하는 컨테이너에 콘텐츠를 추가할 뿐입니다.

또 다른 문제는 eval로 인해 발생합니다. 하나는 Blueidea에서 Hutia가 언급한 범위 문제입니다. 다른 문제는 eval을 사용하여 내부 스크립트를 실행하면 외부 스크립트가 로드되기 전에 발생한다는 것입니다. 로드되었습니다. 실행이 시작되었습니다. 이 두 가지 문제를 해결하려면 window.setTimeout 함수를 사용하여 각 스크립트를 실행하기 전에 일정 시간 동안 지연시킬 수 있습니다. 외부 스크립트의 지연 시간은 내부 스크립트의 경우 완전히 로드될 수 있도록 더 길게 설정할 수 있습니다. , 스크립트의 실행 시간이 일반적으로 매우 짧기 때문에 매우 짧게 설정할 수 있습니다. 이는 범위가 변경되지 않음을 보장할 수 있을 뿐만 아니라 기본적으로 스크립트 실행 순서가 변경되지 않음을 보장합니다(이 방법은 100% 효과적인 실행 순서를 보장하는 데 반드시 좋습니다. 네트워크가 매우 바쁜 경우 외부 스크립트가 설정된 시간 내에 로드되지 않을 수 있지만 적어도 eval을 직접 사용하는 것보다 훨씬 낫습니다.

——————————–
(1) 참고: 여기서는 다음과 같이 스크립트가 실행되는 상황이 있으므로 "may"라는 한정자를 사용합니다. 당신은 이것이 보일 것입니다.


이전 방법으로 구현하면 대부분의 스크립트가 정상적으로 실행될 수 있습니다. 그러나 스크립트에 defer 속성이 있는 경우 IE는 해당 코드를 자체적으로 실행하므로(앞서 언급한 대로) 실행 순서가 중단됩니다. 게다가 document.write, document.writeln으로 작성한 코드는 스크립트가 있는 위치가 아닌 맨 마지막에 추가되므로 이 역시 문제가 됩니다.

이 두 가지 문제를 해결하려면 이전 솔루션을 일부 변경해야 합니다. 우선, innerHTML에 먼저 콘텐츠를 할당한 후 이를 통해 스크립트를 검색할 수는 없으며, 스크립트를 검색하려면 콘텐츠를 직접 분석해야 합니다. 또한 스크립트 이외의 HTML 부분은 직접 innerHTML에 할당할 수 없으며, 스크립트 실행 후 원본 HTML 내용과 document.writewriteln에 작성된 내용을 순서대로 병합한 후 innerHTML에 할당해야 합니다. 여기서는 태그 콘텐츠의 절반이 있을 수 있으므로 이 콘텐츠의 일부가 innerHTML에 부분적으로 연결될 수 없다는 점에 유의하세요. 이 경우 브라우저에 오류가 발생하기 쉽습니다. 그러면 페이지가 반복적으로 새로 고쳐지는 것을 볼 수 있습니다. 먼저 버퍼에 넣고 마지막으로 innerHTML에 할당하면 이런 문제는 발생하지 않습니다.

그리고 버퍼에 넣는 것의 장점은 스크립트가 실행된 후 버퍼에 새로운 스크립트가 있는지 확인할 수 있다는 점입니다. 있으면 재귀적으로 실행하여 해당 문서를 작성하면 됩니다. .write 및 document. writeln으로 작성된 스크립트도 실행할 수 있습니다.

2006-6-4 업데이트:

innerHTML에 삽입된 스크립트가 innerHTML에 삽입된 개체를 가져올 수 없는 문제를 수정했습니다. (알려주신 네티즌 DE님께 감사드립니다)

동일한 컨테이너에 콘텐츠를 계속해서 설정할 때 더 이상 충돌이 발생하지 않도록 동일한 컨테이너에 있는 콘텐츠에 대한 공유 잠금 설정을 추가했습니다. (알려준 싱가포르 네티즌 Jason Li에게 감사드립니다)

2006-5-29 업데이트:

동일한 외부 스크립트를 두 번째로 로드하는 속도를 향상시키기 위해 외부 스크립트 캐싱 기능 사용을 추가했습니다.

2006-5-23 업데이트:

열성적인 사용자 johnZEN이 상기시켰듯이, 여러 컨테이너의 내용을 동시에 설정할 때 더 이상 충돌이 발생하지 않도록 공유 잠금이 추가되었습니다. .

네티즌 udbjatwfn이 알려드린 대로 IE 내부 스크립트 실행 범위 오류가 수정되었습니다.

다음은 최종 구현 코드입니다.

다운로드: innerhtml.js

코드 복사 코드는 다음과 같습니다.

/* innerhtml.js 
* 저작권 Ma Bingyao  
* 버전: 1.9 
* 최종 수정: 2006-06-04 
* 이 라이브러리는 무료입니다.  재배포하거나 수정할 수 있습니다. 
* http://www.php.cn/ 
*/ 

var global_html_pool = []; 
var global_script_pool = []; 
var global_script_src_pool = []; 
var global_lock_pool = []; 
var innerhtml_lock = null; 
var document_buffer = ""; 

함수 set_innerHTML(obj_id, html, time) { 
    if (innerhtml_lock == null) { 
        innerhtml_lock = obj_id; 
    } 
    else if (typeof(time) == "정의되지 않음") { 
        global_lock_pool[obj_id   "_html"] = html; 
        window.setTimeout("set_innerHTML('"   obj_id   "', global_lock_pool['"   obj_id   "_html']);", 10); 
        반품; 
    } 
    else if (innerhtml_lock != obj_id) { 
        global_lock_pool[obj_id   "_html"] = html; 
        window.setTimeout("set_innerHTML('"   obj_id   "', global_lock_pool['"   obj_id   "_html'], "   시간   ");", 10); 
        반품; 
    } 

    function get_script_id() { 
        return "script_"   (new Date()).getTime().toString(36) 
            Math.floor(Math.random() * 100000000).toString(36); 
    } 

    document_buffer = ""; 

    document.write = 함수(str) { 
        document_buffer  = str; 
    } 
    document.writeln = 함수(str) { 
        document_buffer  = str   "n"; 
    } 

    global_html_pool = []; 

    var 스크립트 = []; 
    html = html.split(//i); 
    for (var i = 0; i         global_html_pool[i] = html[i].replace(/<script></script>        스크립트[i] = {텍스트: '', src: '' }; 
        scripts[i].text = html[i].substr(global_html_pool[i].length); 
        scripts[i].src = scripts[i].text.substr(0, scripts[i].text.indexOf('>')   1); 
        scripts[i].src = scripts[i].src.match(/srcs*=s*("([^"]*)"|'([^']*)'|([^s ]*)[s>])/i); 
        if (scripts[i].src) { 
           if (scripts[i].src[2]) { 
              scripts[i].src = scripts[i].src[2]; 
           } 
           그렇지 않으면 (scripts[i].src[3]) { 
                스크립트[i].src = 스크립트[i].src[3]; 
            } 
            else if (scripts[i].src[4]) { 
               scripts[i].src = scripts[i].src[4]; 
           } 
            그렇지 않으면 { 
               스크립트[i].src = ""; 
            } 
            scripts[i].text = ""; 
        } 
        else { 
            scripts[i].src = ""; 
            scripts[i].text = scripts[i].text.substr(scripts[i].text.indexOf('>')   1); 
            scripts[i].text = scripts[i].text.replace(/^s*