증상 : 요소의 innerHTML 값을 설정할 때 제공된 HTML 코드에 JS 스크립트가 포함되어 있으면이 스크립트가 유효하지 않거나 일부 브라우저에서는 유효하지 않지만 다른 브라우저에서는 유효하지 않습니다.
원인 : 브라우저마다 내부에 삽입 된 스크립트를 처리하는 방법이 다릅니다. 연습 후에는 다음과 같이 요약됩니다.
IE의 경우, 먼저 스크립트 태그에는 지연 속성이 있어야하며, 둘째, 삽입 순간에 내부 TRE가 DOM 트리에 있어야하는 노드가 있어야합니다.
Firefox 및 Opera의 경우 삽입 순간에 내부 Tree에 내부 HTML이 허용되지 않는 노드.
위의 결론에 따르면, 내부를 설정하는 일반적인 방법이 제공됩니다.
코드 사본은 다음과 같습니다.
/*
* 설명 : 크로스 브라우저 설정 InnerHTML 메소드
* 스크립트와 스타일을 포함하도록 HTML 코드를 삽입 할 수 있습니다.
* 매개 변수 :
* el : dom 트리의 노드, 내부 html을 설정
* htmlcode : HTML 코드를 삽입했습니다
* 테스트 브라우저 : IE5+, Firefox1.5+, Opera8.5+
*/
var set_innerhtml = function (el, htmlcode)
{var ua = navigator.useragent.tolowercase ();
if (ua.indexof ( 'msie')> = 0 && ua.indexof ( 'opera') <0)
{htmlcode = '<div style = "display : none">의 경우 </div>' + htmlcode;
htmlcode = htmlcode.replace (/<script ([^>]*)*/gi, '<script $ 1 defer = "true">');
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 함수를 재정의하십시오.
set_innerhtml 사용을 피하고 html 코드를 삽입하면 document.write 문이 포함되어있어 원래 페이지가 손상되었습니다.
*/
document.write = function () {
var body = document.getElementsByTagName ( 'body') [0];
for (var i = 0; i <arguments.length; i ++) {
인수 = 인수 [i];
if (typeof argument == 'string') {
var el = body.appendChild (document.createElement ( 'div'));
set_innerhtml (el, argument)
}
}
}