현재 실행 중인 JavaScript를 로드한 스크립트 요소를 찾는 방법은 무엇입니까?

현재 실행 중인 스크립트를 로드한 스크립트 요소를 참조하는 방법

문제 이해

특정 시나리오에서는 개발자가 추가 스크립트를 동적으로 로드해야 할 수도 있습니다. 문서에 스크립트를 넣습니다. 그러나 document.getElementsByTagName('head')[0].appendChild(v)를 사용하는 기존 방법은 HEAD 요소가 아직 완전히 렌더링되지 않은 경우 적합하지 않을 수 있습니다.

해결책: 현재 스크립트 참조

현재 실행 중인 스크립트를 로드한 스크립트 요소를 참조하려면 다음과 같은 여러 기술을 사용할 수 있습니다.

1. document.currentScript

장점:

• 간단하고 명시적이며 안정적입니다
• 스크립트 태그를 수정할 필요가 없습니다
• 비동기 스크립트와 함께 작동합니다(지연 및 async)
• 동적으로 삽입된 스크립트로 작동

제한사항:

• 이전 브라우저 또는 IE에서는 지원되지 않음
• 모듈에서는 작동하지 않습니다(<script type="module">)

<pre>
<script>
var me = document.currentScript;
</script>
&lt ;/pre>

2. 스크립트 태그 ID

장점:

• 간단함, 명시적, 신뢰성
• 광범위한 지원
• 비동기 스크립트와 함께 작동 (연기 및 비동기)
• 스크립트와 함께 작동 동적으로 삽입됨

제한 사항:

• 스크립트 태그에 ID 속성을 추가해야 합니다

<pre>
<script>var me = document.getElementById('myscript');
</script>
</pre>

3. 데이터 속성 선택

장점:

• 간단하고 명시적
• 비동기 스크립트 작업(지연 및 비동기)
• 삽입된 스크립트로 작동 동적으로

제한 사항:

• 스크립트 태그에 사용자 정의 data-* 속성을 추가해야 합니다.
• 사용하는 것보다 덜 광범위하게 지원됩니다. ID
• 동일한 데이터를 공유하는 다른 요소와 혼동을 일으킬 수 있음 속성

<pre>
<script data-name="myscript">
var me = document.querySelector('script[data-name="myscript"] ');
</script>
</pre>

4. 소스 선택

장점:

• 신뢰성
• 비동기 스크립트 작업(지연 및 비동기)
• 스크립트 작업 동적으로 삽입됨
• 맞춤 속성 또는 ID 없음 필수

제한사항:

• 로컬 스크립트에서는 작동하지 않습니다
• 다양한 환경(예: 개발 대 프로덕션)에서 문제를 일으킵니다
• 정적이고 취약함(스크립트 위치를 변경하려면 수정이 필요함)
• ID를 사용하는 것보다 덜 지원됩니다
• 동일한 스크립트를 사용할 경우 문제가 발생합니다. 여러 번 로드됨

<pre>
<script src="//example.com/embed.js"></script>
</pre>

var me = document.querySelector('script[src="//example.com/embed.js"]');
</script>
</pre>

5. 스크립트 반복

장점:

• 이전 기술의 이점 상속
• querySelector()에 의존하지 않으므로 이전 버전에서도 작동합니다. 브라우저

제한 사항:

• 더 복잡하고 계산 비용이 많이 듭니다

<사전>
< script>
var me = null;
var scripts = document.getElementsByTagName("script")
for (var i = 0; i < scripts.length; i) {
if (isMe(scripts[i])) {

me = scripts[i];

}
}
</script>
</pre>

6. 마지막으로 실행된 스크립트

장점:

• 간단함
• 거의 보편적으로 지원
• 사용자 정의 속성 또는 ID 없음 필수

제한 사항:

• 비동기 스크립트에서는 작동하지 않습니다(지연 및 비동기)
• 삽입된 스크립트에서는 작동하지 않습니다 동적으로

<script><br>var scripts = document.getElementsByTagName( 'script' );<br>var me = scripts[ scripts.length - 1 ];<br>&lt;/script&gt;<br>&lt;/pre&gt;</script>

결론

현재 스크립트 요소를 참조하는 방법 선택은 애플리케이션의 특정 요구 사항과 다양한 브라우저 지원. 최신 브라우저의 경우 document.currentScript가 선호되는 접근 방식입니다.

위 내용은 현재 실행 중인 JavaScript를 로드한 스크립트 요소를 찾는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!