innerHTML은 여러 브라우저_javascript 기술과 호환되는 HTML 코드 및 스크립트를 동적으로 추가합니다.

증상: 요소의 innerHTML 값을 설정할 때 제공된 HTML 코드에 js 스크립트가 포함되어 있으면 이러한 스크립트가 유효하지 않거나 일부 브라우저에서는 유효하지만 다른 브라우저에서는 유효하지 않은 경우가 많습니다.

원인: 브라우저마다 innerHTML에 삽입된 스크립트를 처리하는 방법이 다릅니다. 연습해 보면 다음과 같이 요약할 수 있습니다.

IE의 경우 우선 script 태그에 defer 속성이 있어야 하고, 두 번째로 삽입 시 innerHTML이 속한 노드가 DOM 트리에 있어야 합니다.

Firefox 및 Opera의 경우 innerHTML이 속한 노드는 삽입 시 DOM 트리에 있을 수 없습니다.

위의 결론을 바탕으로 일반적인 설정 innerHTML 메소드가 제공됩니다.

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

/*
* 설명 : 크로스 브라우저 설정 innerHTML 메소드
* 스크립트와 스타일이 포함된 HTML 코드 삽입 허용
* 매개변수:
* el: DOM 트리의 노드, innerHTML 설정
* htmlCode: 삽입된 HTML 코드
*테스트된 브라우저: ie5, firefox1.5, Opera8.5
*/
var set_innerHTML = 함수(el, htmlCode)
{var ua = navigator.userAgent.toLowerCase();
if (ua.indexOf('msie') >= 0 && ua.indexOf('opera') < 0)
{htmlCode = '

for IE

' htmlCode;
htmlCode = htmlCode.replace(/]*)>/gi,'');
el.innerHTML = htmlCode;
el.removeChild(el.firstChild);
}
그렇지 않으면
{var el_next = el.nextSibling;
var el_parent = el.parentNode;
el_parent.removeChild(el);
el.innerHTML = htmlCode;
if(el_next)
el_parent.insertBefore(el, el_next)
그 외
el_parent.appendChild(el);
}
}

위 코드에는 또 다른 문제가 있습니다. 삽입된 HTML 코드에 document.write 문이 포함되어 있으면 전체 페이지가 삭제됩니다. document.write를 다시 정의하면 이러한 상황을 피할 수 있습니다. 코드는 다음과 같습니다.

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

/*
설명: document.write 기능을 재정의합니다.
set_innerHTML을 사용하는 경우 삽입된 HTML 코드에 document.write 문이 포함되어 원본 페이지가 손상될 수 있으므로 피하세요.
*/
document.write = 함수(){
var body = document.getElementsByTagName('body')[0];
for (var i = 0; i < 인수.길이; i ) {
인수 = 인수[i];
if (인수 유형 == '문자열') {
var el = body.appendChild(document.createElement('div'));
set_innerHTML(el, 인수)
}
}
}