.innerHTML을 사용하여 동적으로 삽입된 스크립트 평가 .innerHTML을 사용하여 웹 페이지에 콘텐츠를 삽입하면 해당 콘텐츠에 강요. 이는 이러한 요소 내의 스크립트 코드가 자동으로 실행되지 않을 수 있기 때문입니다.</p> <p>이 문제를 해결하려면 이러한 스크립트를 명시적으로 실행할 수 있습니다. JavaScript에서 이를 수행하는 방법을 살펴보겠습니다.</p> <p><strong>ES6 구현:</strong></p> <pre>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); }); }</pre> <p><strong>사용:</strong></p> <pre>.innerHTML = HTML; // Does not run <script> tags in HTML setInnerHTML(, HTML); // Runs <script> tags in HTML</pre> <p> 이 스크립트는 새로 삽입된 콘텐츠를 탐색하여 <script> 요소를 추가하고 새로운 <script> 속성과 코드가 있는 요소. 그런 다음 원본 <script> 요소를 새로운 요소와 함께 사용하여 스크립트 코드가 실행되도록 합니다.</p>
