[FE] js 파일 을 동적 으로 불 러 오 는 방법

1. innerHTML 의 질문innerHTML 탭 삽입 을 사용 하면 js 파일 을 불 러 오지 않 습 니 다.

document.getElementById('div1').innerHTML = `
    
`;

DOM 에 이 노드 가 있 지만 js 파일 은 불 러 오지 않 았 고 호출 되 지 않 았 습 니 다.

콘 솔 에서 실험 해 보 겠 습 니 다.

> window.jQuery
undefined

MDN 에서 innerHTML 에 대한 설명 은 다음 과 같다.const name = "alert('I am John in an annoying alert!')"; el.innerHTML = name; // harmless in this case
Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a tag inserted via innerHTML should not execute.</p>
</blockquote>
<h3>2. 동적 생 성 & lt; /h3>
<p>우 리 는 동적 으로 & lt 를 만 들 수 있 습 니 다.code>script</code>요 소 는 DOM 에 삽입 하여 js 파일 을 불 러 옵 니 다. & lt; /p>
<pre><code>const install = ({ src, success }) => {
const script = document.createElement('script');
script.src = src;
script. async = false; / 기본 값 은 true 입 니 다.
script.onload = success;
const head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}
</code></pre>
<p>예: & lt; /p>
<pre><code>install({
src: '//code.jquery.com/jquery-3.2.1.min.js'
});
install({
src: '... / 1. js' / / 내용 은: alert (window. jQuery);
});
</code></pre>
<p>그 중, & lt;code>script.async</code>기본 값 은 & lt;code>true</code>，불 러 온 js 파일 이 비동기 로 실 행 될 것 임 을 표시 합 니 다. & lt;br> MDN 에서 async 에 대한 설명 은 다음 과 같 습 니 다. & lt; /p>
<blockquote>
<p><strong>async</strong><br> A boolean attribute indicating that the browser should, if possible, execute the script asynchronously. This attribute must not be used if the src attribute is absent (i.e. for inline scripts). If it is included in this case it will have no effect. <strong>Dynamically inserted scripts execute asynchronously by default</strong>, so to turn on synchronous execution (i.e. scripts execute in the order they were loaded) set <code>async=false</code>.</p>
</blockquote>
<p>& lt 설정 하면;code>script.async = false;</code>，<br> <code>1.js</code>알림 팝 업 & lt;code>function function(a,b){return new r.fn.init(a,b)}</code>，</p>
<p>그렇지 않 으 면 기본 적 인 상황 에서 & lt;code>script.async</code>위 & lt;code>true</code>，<br> <code>1.js</code>알림 팝 업 & lt;code>undefined</code>。</p>
<hr>
<h3>참고 & lt; /h3>
<p>MDN: Element.innerHTML - Security considerations<br> MDN: <script> - async</p>
</article>
</div>
</div>
</div>
<!--PC 와 WAP 자체 적응 버 전 -- & lt;
<div id="SOHUCS" sid="1239640501091684352"></div>
<script type="text/javascript" src="/views/front/js/chanyan.js">