찾다
웹 프론트엔드JS 튜토리얼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*

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
JavaScript : 웹 언어의 다양성 탐색JavaScript : 웹 언어의 다양성 탐색Apr 11, 2025 am 12:01 AM

JavaScript는 현대 웹 개발의 핵심 언어이며 다양성과 유연성에 널리 사용됩니다. 1) 프론트 엔드 개발 : DOM 운영 및 최신 프레임 워크 (예 : React, Vue.js, Angular)를 통해 동적 웹 페이지 및 단일 페이지 응용 프로그램을 구축합니다. 2) 서버 측 개발 : Node.js는 비 차단 I/O 모델을 사용하여 높은 동시성 및 실시간 응용 프로그램을 처리합니다. 3) 모바일 및 데스크탑 애플리케이션 개발 : 크로스 플랫폼 개발은 개발 효율을 향상시키기 위해 반응 및 전자를 통해 실현됩니다.

JavaScript의 진화 : 현재 동향과 미래 전망JavaScript의 진화 : 현재 동향과 미래 전망Apr 10, 2025 am 09:33 AM

JavaScript의 최신 트렌드에는 Typescript의 Rise, 현대 프레임 워크 및 라이브러리의 인기 및 WebAssembly의 적용이 포함됩니다. 향후 전망은보다 강력한 유형 시스템, 서버 측 JavaScript 개발, 인공 지능 및 기계 학습의 확장, IoT 및 Edge 컴퓨팅의 잠재력을 포함합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유Demystifying JavaScript : 그것이하는 일과 중요한 이유Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

Python 또는 JavaScript가 더 좋습니까?Python 또는 JavaScript가 더 좋습니까?Apr 06, 2025 am 12:14 AM

Python은 데이터 과학 및 기계 학습에 더 적합한 반면 JavaScript는 프론트 엔드 및 풀 스택 개발에 더 적합합니다. 1. Python은 간결한 구문 및 풍부한 라이브러리 생태계로 유명하며 데이터 분석 및 웹 개발에 적합합니다. 2. JavaScript는 프론트 엔드 개발의 핵심입니다. Node.js는 서버 측 프로그래밍을 지원하며 풀 스택 개발에 적합합니다.

JavaScript를 어떻게 설치합니까?JavaScript를 어떻게 설치합니까?Apr 05, 2025 am 12:16 AM

JavaScript는 이미 최신 브라우저에 내장되어 있기 때문에 설치가 필요하지 않습니다. 시작하려면 텍스트 편집기와 브라우저 만 있으면됩니다. 1) 브라우저 환경에서 태그를 통해 HTML 파일을 포함하여 실행하십시오. 2) Node.js 환경에서 Node.js를 다운로드하고 설치 한 후 명령 줄을 통해 JavaScript 파일을 실행하십시오.

Quartz에서 작업이 시작되기 전에 알림을 보내는 방법은 무엇입니까?Quartz에서 작업이 시작되기 전에 알림을 보내는 방법은 무엇입니까?Apr 04, 2025 pm 09:24 PM

쿼츠 타이머를 사용하여 작업을 예약 할 때 미리 쿼츠에서 작업 알림을 보내는 방법 작업의 실행 시간은 CRON 표현식에 의해 설정됩니다. 지금...

JavaScript에서 생성자의 프로토 타입 체인에서 함수의 매개 변수를 얻는 방법은 무엇입니까?JavaScript에서 생성자의 프로토 타입 체인에서 함수의 매개 변수를 얻는 방법은 무엇입니까?Apr 04, 2025 pm 09:21 PM

JavaScript 프로그래밍에서 JavaScript의 프로토 타입 체인에서 함수 매개 변수를 얻는 방법 프로토 타입 체인의 기능 매개 변수를 이해하고 조작하는 방법은 일반적이고 중요한 작업입니다 ...

Wechat Mini 프로그램 웹 뷰에서 Vue.js 동적 스타일 변위가 실패한 이유는 무엇입니까?Wechat Mini 프로그램 웹 뷰에서 Vue.js 동적 스타일 변위가 실패한 이유는 무엇입니까?Apr 04, 2025 pm 09:18 PM

WeChat 애플릿 웹 뷰에서 vue.js를 사용하는 동적 스타일 변위 실패가 vue.js를 사용하는 이유를 분석합니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25 : Myrise에서 모든 것을 잠금 해제하는 방법
3 몇 주 전By尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

ZendStudio 13.5.1 맥

ZendStudio 13.5.1 맥

강력한 PHP 통합 개발 환경

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기