innerHTML에서 script 로드 안 되는 문제

✔결론

🚩들어가며

👀문제 정의

🤦‍♂️관련된 사실 수집 & ❓원인 추론

🦾해결책 시도

✔원인 & 해결방법

✔결론

---

🚩들어가며

👀문제 정의

아래 코드는 레이어 팝업을 띄우는 코드다

html을 text로 받아와서 미리 존재하던 .popup.wrap에 innerHTML로 HTML text를 추가해 레이어 팝업을 띄워주는 방식인데,

function test() {
    syusyu.common.Ajax.sendPOPRequest("GET", "/dlvAddr", '', res => {
        const $popupWrap = document.querySelector('.popup-wrap');
        $popupWrap.innerHTML = res;
        $popupWrap.classList.toggle('active');
    });
}

dlvAddr.js 파일이 로드가 되지 않는다 😢

<script src="<c:url value="${jsUrlFos}/popup/dlvAddr.js"/>" defer></script>
<div class="popup-layer w-510">
    <div class="popup-head">
        <h4>배송지 목록</h4>

🤦‍♂️관련된 사실 수집 & ❓원인 추론

외부 스크립트를 로드하는 <script> 태그를 innerHTML 속성을 통해 동적으로 추가하더라도, 그 스크립트는 실행되지 않는다는 것입니다. 이는 보안상의 이유로, 웹 브라우저에서 제공하는 innerHTML 속성의 동작 방식입니다. 따라서 위의 코드에서 <script src="<c:url value="${jsUrlFos}/popup/dlvAddr.js"/>"></script>는 실제로 스크립트를 로드하거나 실행하지 않습니다.

따라서 스크립트를 동적으로 실행하려면 innerHTML 속성을 통해 스크립트를 추가하는 대신, 별도의 방법을 사용해야 합니다. 위에서 설명드린 loadScript 함수를 사용하는 방법이 그 예시입니다. 또는 HTML에 스크립트를 직접 삽입하는 방법을 사용할 수도 있습니다.

🦾해결책 시도

innerHTML에서 JQuery .html로 변경해봄

$(".popup-wrap").html(res);

결과적으로 html 내부의 script 코드도 실행이되고 외부 js 파일도 불러는 왔으나

dlvAddr.js 내부의 DOMContentLoaded 이벤트가 발생이 안됨..

document.addEventListener("DOMContentLoaded", () => {
    document.querySelector('.popup-wrap .close').addEventListener('click', () => {
        syusyu.common.Popup.close();
    });
});

알고보니 DOMContentLoaded 이벤트는 웹 페이지가 처음 완전히 로드되었을 때 한 번만 발생합니다. 따라서, 페이지 로드 후에 JavaScript를 사용하여 동적으로 요소를 추가하더라도 DOMContentLoaded 이벤트는 다시 발생하지 않는다고 한다.

---

✔원인 & 해결방법

dlvAddr.js를 아래처럼 수정해주니 잘 된다.!

document.querySelector('.popup-wrap .close').addEventListener('click', () => {
    syusyu.common.Popup.close();
});

결국해결책은 innerHTML(X) jQuery .html을 사용하는 것이었다.

---

여기서 궁금한점

아래는 dlvAddr.jsp인데 3번째 줄에서 script 태그를 만나면 html 요소 로드를 멈추고 script를 가져오고 파싱해서 렌더링할거아니야 그리고 나서 아래 div 태그가 읽히겠지? 그런데 dlvAddr.js를 보면 아직 .close가 존재하지 않고 읽히지 않았는데 어떻게 이벤트가 등록되는거?

확실한 건 아니고 내가 추측한 거지만 jQuery의 .html을 사용해서 html 문자열을 추가하면 해당 문자열이 먼저 전체적으로 파싱되고, 그 다음에 <script> 태그 내부의 스크립트가 실행되는 것 같다…

그래서 스크립트가 실행되는 시점에서는 이미 ‘.close’ 요소가 DOM에 추가된 상태이기 때문에, 해당 요소에 이벤트 핸들러를 등록하는 게 가능한 것 같다.

[javaScript]Element.innerHTML는<script>를 실행시키지 않습니다.

innerHTML innerHTML의 경우 기본적으로 태그를 일반 text 문자로 인식하게끔 되어 있습니다. 이는 https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0 해당 링크에서 나와 있듯이 script elements inserted using innerHTML do not execute when they are inserted. code injection과 같은 경우를 방지하기 위해서라는군요. 따라서 ajax로 페이지를 붙일 때 innerHTML을 제외하고 를 적용 시키는 방법은 총 2가지가 있습니다. elemental.innerHTML=string 대신 jQuery의 $(elemental).html(string)을 사용하면 됩니다. ..

https://jjam89.tistory.com/178

Why doesn't a browser run a <script> in an HTML fragment retrieved via fetch API?

I was experimenting with getting a fragment of HTML using the fetch API, and then adding it to an HTML page. While this works fine for HTML content, I noticed that if I put a &lt;script&gt; tag in ...

https://stackoverflow.com/questions/49867200/why-doesnt-a-browser-run-a-script-in-an-html-fragment-retrieved-via-fetch-api

사실 저 방식은 html이 지양하는 방식이라고 한다..

HTML 5

https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0

Uploaded by N2T