innerHTML_javascript 기술에 삽입된 스크립트를 실행하기 위한 구현 코드-JS 튜토리얼-php.cn

때때로 이 문제는 사소하고 무시할 수도 있지만 때로는 이 문제가 매우 심각하여 프로그램이 예상한 결과를 얻지 못할 가능성이 높습니다. 그래서 우리는 이 문제를 해결해야 합니다.

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나 이름이 없으므로 원본 콘텐츠에 있는 일부 태그의 ID나 이름과 충돌하지 않습니다. 그러나 여기서 주의할 점이 하나 있습니다. 일부 다른 브라우저에서는 디스플레이를 지원하지 않을 수 있으므로 IE인지 확인한 다음 이 콘텐츠를 추가할지 여부를 결정해야 합니다. CSS 수정이 없는 경우(예: Opera Mini) 이것을 추가하세요. 이 코드는 최종 디스플레이 효과에 영향을 미칩니다.

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

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

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

내부 스크립트를 살펴보면 스크립트 개체의 text 속성을 사용하여 내부 스크립트의 내용을 직접 얻을 수 있습니다. 여기서는 Opera에서 innerHTML 속성 대신 스크립트 개체의 text 속성을 사용합니다. 브라우저, 스크립트 객체 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을 직접 사용하는 것보다 훨씬 낫습니다.

이전 방법으로 구현하면 대부분의 스크립트가 정상적으로 실행될 수 있습니다. 그러나 스크립트에 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 
* Copyright Ma Bingyao  
* 버전: 1.9 
* 최종 수정일: 2006-06-04 
* 이 라이브러리는 무료입니다. 재배포하거나 수정할 수 있습니다. 
* http://www.coolcode.cn/?p=117 
*/ 

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

function set_innerHTML(obj_id, html, time) { 
if (innerhtml_lock == null) { 
innerhtml_lock = obj_id; 
} 
else if (typeof(time) == "undefine") { 
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'], " time ");", 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 scripts = []; 
html = html.split(//i); 
for (var i = 0; i < html.length; i ) { 
global_html_pool[i] = html[i].replace(/scripts[i] = {text: '', 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]; 
} 
else if (scripts[i].src[3]) { 
scripts[i].src = scripts[i].src[3 ]; 
} 
else if (scripts[i].src[4]) { 
scripts[i].src = scripts[i].src[4] 
} 
 else { 
scripts[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*<--s*/g, "") 
} 
} 

var s; (시간) == "정의되지 않음") { 
s = 0; 
} 
else { 
s = 시간 
} 

var script, add_script, Remove_script; 

for (var i = 0; i < scripts.length; i ) { 
var add_html = "document_buffer = global_html_pool[" i "];n" 
add_html = "document. getElementById('" obj_id "').innerHTML = document_buffer;n"; 
script = document.createElement("script"); 
if (scripts[i].src) { 
script.src = scripts[i].src; 
if (typeof(global_script_src_pool[script.src]) == "정의되지 않음") { 
global_script_src_pool[script.src] = true; 
초 = 2000; 
} 
else { 
s = 10; 
} 
} 
else { 
script.text = scripts[i].text; 
s = 10; 
} 
script.defer = true; 
script.type = "텍스트/자바스크립트"; 
script.id = get_script_id(); 
global_script_pool[script.id] = 스크립트; 
add_script = add_html; 
add_script = "document.getElementsByTagName('head').item(0)"; 
add_script = ".appendChild(global_script_pool['" script.id "']);n"; 
window.setTimeout(add_script, s); 
remove_script = "document.getElementsByTagName('head').item(0)"; 
remove_script = ".removeChild(document.getElementById('" script.id "'));n"; 
remove_script = "delete global_script_pool['" script.id "'];n"; 
window.setTimeout(remove_script, s 10000); 
} 

var end_script = "if (document_buffer.match(/<\/script>/i)) {n"; 
end_script = "set_innerHTML('" obj_id "', document_buffer, " s ");n"; 
end_script = "}n"; 
end_script = "else {n"; 
end_script = "document.getElementById('" obj_id "').innerHTML = document_buffer;n"; 
end_script = "innerhtml_lock = null;n"; 
end_script = "}"; 
window.setTimeout(end_script, s); 
} 

 

JS调사용 방법:
JavaScript 代码

复system代码代码如下:

set_innerHTML('要插入innerhtml적ID명', '要插入的代码');

옵션 2: ajaxwing의 innerHTML 단순 버전
그러나 이 구현의 한 가지 문제는 스크립트에서 document.write 및 document.writeln의 축약된 콘텐츠 위치가 잘못되었다는 것입니다.

호출 방법:
JavaScript 코드
setInnerHTML('DOM 트리의 노드', '삽입할 코드')
JavaScript 코드

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

 
/* 
* 설명: 브라우저 간 설정 innerHTML 메서드 
* 허용 삽입 HTML 코드에는 스크립트와 스타일이 포함됩니다 
* 작성자: kenxu  
* 날짜: 2006-03-23 ​​​​
* 매개변수: 
* el: in the 법적 DOM 트리 노드
* htmlCode: 법적 HTML 코드
* 테스트된 브라우저: ie5, firefox1.5, Opera8.5 
*/ 
var setInnerHTML = function (el, htmlCode) { 
 var ua = navigator.userAgent.toLowerCase(); 
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0) { 
htmlCode = ' < div style="display:none">for IE

'
htmlCode = htmlCode.replace(/]*)>/gi,
'< ;script$1 defer>');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild)
} else {
var el_next
var el_parent; = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlCode;
if (el_next) {
el_parent.insertBefore(el, el_next)
} else {
el_parent.appendChild(el);
}
}
}