>웹 프론트엔드 >JS 튜토리얼 >innerHTML로 삽입된 스크립트가 항상 실행되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

innerHTML로 삽입된 스크립트가 항상 실행되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

Susan Sarandon
Susan Sarandon원래의
2024-12-18 21:28:17176검색

Why Don't Scripts Inserted with innerHTML Always Execute, and How Can I Fix It?

innerHTML로 삽입된 스크립트 실행

innerHTML을 사용하여 웹페이지에 스크립트를 삽입하는 것은 어려울 수 있습니다. 스크립트가 DOM에는 나타날 수 있지만 실행에 실패합니다. 이는 브라우저가 페이지에 동적으로 추가될 때 스크립트 실행을 처리하는 방식이 다르기 때문입니다.

이를 극복하기 위한 한 가지 방법은 DOM에서 스크립트 요소를 재귀적으로 검색하고 이를 실행 가능한 복제본으로 바꾸는 것입니다. 다음은 재귀 스크립트 교체 함수에 대한 단계별 설명입니다.

function nodeScriptReplace(node) {
  • 이 함수는 노드를 인수로 사용하고 해당 노드가 스크립트 요소인지 확인합니다(예: 태그 이름이 ' SCRIPT').
  • 스크립트 요소인 경우 동일한 코드가 포함된 복제본으로 대체됩니다(다음을 통해 달성됨). nodeScriptClone()).
  • 스크립트 요소가 아닌 경우 노드의 하위 항목에서 스크립트 요소를 재귀적으로 검색합니다.
function nodeScriptClone(node) {
  • 이 함수는 새 스크립트를 생성합니다. 원본 스크립트 노드의 코드와 일치하는 텍스트(코드)가 있는 스크립트 요소.
  • 또한 원본 노드의 모든 속성을 'src' 속성과 같은 모든 설정을 유지하기 위한 클론입니다.
function nodeScriptIs(node) {
  • 이 함수는 태그 이름을 확인하여 노드가 스크립트 요소인지 확인하는 도우미 역할을 합니다.

사용 예:

삽입된 스크립트를 실행하려면 innerHTML을 사용하여 문서 본문(또는 원하는 다른 컨테이너)에서 nodeScriptReplace() 함수를 호출합니다.

nodeScriptReplace(document.getElementsByTagName("body")[0]);

이 재귀적 접근 방식을 활용하면 검색 프로세스 중에 발견된 모든 스크립트 요소가 다음으로 대체됩니다. 실행 가능한 복제본을 생성하여 innerHTML을 사용하여 삽입할 때 적절한 스크립트 실행을 보장합니다.

위 내용은 innerHTML로 삽입된 스크립트가 항상 실행되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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