innerHTML에서 스크립트가 실행되지 않는 이유는 무엇이며 어떻게 해결할 수 있습니까?

innerHTML을 사용하여 삽입된 스크립트를 실행하는 방법은 무엇입니까?

innerHTML을 사용하여 요소에 콘텐츠를 삽입하는 경우 콘텐츠에 포함된 스크립트가 실행되지 않을 수 있습니다. 자동으로 실행됩니다. 이는 innerHTML을 사용하여 스크립트를 삽입한 후 브라우저가 스크립트를 평가하지 않기 때문에 발생합니다.

해결책:

이 문제를 해결하려면 JavaScript를 사용하여 각 스크립트 요소를 다시 생성할 수 있습니다. 수동으로 DOM의 원래 스크립트 태그를 교체하세요. ES6의 솔루션은 다음과 같습니다.

function setInnerHTML(elm, html) {
  elm.innerHTML = html;

  Array.from(elm.querySelectorAll("script"))
    .forEach(oldScriptEl => {
      const newScriptEl = document.createElement("script");

      Array.from(oldScriptEl.attributes).forEach(attr => {
        newScriptEl.setAttribute(attr.name, attr.value);
      });

      const scriptText = document.createTextNode(oldScriptEl.innerHTML);
      newScriptEl.appendChild(scriptText);

      oldScriptEl.parentNode.replaceChild(newScriptEl, oldScriptEl);
    });
}

사용법:

.innerHTML = HTML; // does *NOT* run <script> tags in HTML
setInnerHTML(, HTML); // does run <script> tags in HTML

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