.innerHTML을 통해 추가된 인라인 스크립트를 실행하는 방법은 무엇입니까?

.innerHTML을 통해 삽입된 인라인 스크립트 실행

Q: .innerHTML 속성을 사용하여 요소에 삽입된 스크립트를 어떻게 실행할 수 있나요?

A: .innerHTML을 통해 삽입된 스크립트를 실행하려면 다음을 따르세요. 단계:

1. 새 함수 만들기: 삽입할 HTML 요소(elm)와 HTML 콘텐츠(html)라는 두 개의 매개 변수를 사용하는 setInnerHTML이라는 함수를 정의합니다.
2. HTML 삽입: 요소의 innerHTML을 지정된 HTML로 설정합니다. content.
3. 스크립트 요소 추출: 모든 <script> 수정된 HTML 콘텐츠 내의 요소.</script>

4. 스크립트 반복: <script> 요소를 추가하고 각 스크립트에 대해 다음 단계를 수행합니다.</script>

   • 새 <script> 요소(newScriptEl).</script>
   • 원본 <script> 요소를 새 요소에 추가합니다.</script>
   • 원본 <script>의 innerHTML을 포함하는 텍스트 노드를 만듭니다. 요소를 새 스크립트 요소에 추가합니다.</script>
   • 원본 <script> </script>
5. 예: 사용 예를 포함하도록 함수를 강화합니다.

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);
  });

  // Simplified for clarity (not part of the setInnerHTML function)
  const htmlWithScript = "<script type='"text/javascript"'>alert('test');</script><strong>test</strong>";
  setInnerHTML(document.querySelector('div'), htmlWithScript);
}

6. 사용법: 기능을 사용하려면 HTML을 제공하기만 하면 됩니다. 요소와 스크립트가 포함된 HTML 콘텐츠입니다. 스크립트는 DOM에 삽입되면 자동으로 실행됩니다.

이 기술은 innerHTML에 대한 직접 할당의 제한을 우회하고 동적으로 삽입된 인라인 스크립트의 성공적인 실행을 허용합니다.

위 내용은 .innerHTML을 통해 추가된 인라인 스크립트를 실행하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!