IE_javascript 스킬 하에서 cloneNode 사용시 주의사항 공유

cloneNode는 지정된 dom 노드의 복사본을 만드는 데 사용되는 HtmlElement 프로토타입 체인의 메서드입니다. 이는 부울 매개 변수 include_all을 허용합니다. include_all이 true로 설정되면 복사본에는 지정된 노드의 모든 하위 노드가 포함됩니다.

그러나 script 태그도 dom 노드이며, cloneNode는 여전히 유효합니다. 다양한 브라우저(특히 IE)에서 cloneNode의 실행 결과가 일치하지 않는 것으로 측정되었습니다. 주요 현상은 다음 두 가지입니다. :

IE, IE8 이상에서는 노드 복제 시 해당 노드에 스크립트 노드가 포함되어 있으면 해당 스크립트 노드의 스크립트 내용이 다시 실행될 수 있습니다.
IE가 아닌 브라우저의 경우 cloneNode 노드에 포함된 스크립트 노드의 스크립트 콘텐츠가 다시 실행되지 않습니다.
IE 이외의 브라우저의 성능에는 매우 만족합니다. 위에서 언급한 IE의 "가능성"에 대해서는 두 가지 상황이 있습니다.

cloneNode가 스크립트 노드인 경우 노드 여부에 관계없이 외부 링크 스크립트나 포함된 스크립트는 다시 실행되지 않습니다.
Node를 다른 노드로 복제하면 해당 노드에 포함된 내장 스크립트는 실행되지 않지만, 포함된 외부 링크 스크립트는 다시 실행됩니다.
다음은 IE에서 cloneNode의 문제를 재현하는 데모입니다.

이거 보면 현기증 날 것 같나요? 해결 방법은 매우 간단합니다. 브라우저가 무엇이든 노드를 복제하기 전에 대상 노드 아래의 모든 스크립트 태그를 제거하면 됩니다. 스크립트가 이미 실행되었기 때문에 해당 태그를 제거해도 다음과 같이 아무런 영향이 없습니다.

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

function cloneNode(dom){
var scripts = dom.getElementsByTagName("script");
for(var i = scripts - 1, s; i >= 0; i --){
s = scripts[i]
s .parentNode .removeChild(s);
}
return dom.cloneNode(true);
}

따라서 cloneNode(true)를 사용할 때는 주의해야 합니다. ) 생각하기: 복사된 노드의 모든 자식 노드가 필요한가? 부정적인 영향을 피하기 위해 불필요한 것을 모두 제거하십시오. 또 다른 예를 들어, 복사된 div에 iframe이 포함되어 있고 iframe 페이지에 parent.xxx... 스크립트가 있으면 iframe의 이러한 스크립트가 필연적으로 실행됩니다. 다시 말하지만, iframe 페이지 자체에는 아무런 문제가 없지만(반드시 그런 것은 아님) 상위 페이지에서 작동하기 때문에 이 상위 페이지의 영향을 추정하기 어렵습니다. 해결책은 Node를 복제한 다음 복사본에 포함된 iframe을 종료하는 것입니다. 물론 플롯의 요구에 따라 iframe을 종료할 수 없는 경우 iframe 페이지의 스크립트가 자체적으로 판단합니다.

또한, cloneNode 대상 노드에 링크 태그가 포함된 경우에도 약간의 영향을 미칠 수 있습니다. 쓸모가 없다면 향후 문제를 피하기 위해 Child를 제거하겠습니다.