인라인 JavaScript가 외부 소스가 있는 스크립트 태그에서 작동하지 않는 이유는 무엇입니까?

HTML 스크립트 태그로 스크립트 로드

HTML 스크립트 태그는 JavaScript 코드를 포함하고 실행하는 데 사용됩니다. 기본적으로 이 태그는 JavaScript 파일을 로드하기 위해 scr과 같은 외부 소스 속성을 사용합니다. 그러나 다음과 같이 스크립트 태그 내에 인라인 JavaScript를 포함시키려는 시도는 다음과 같습니다.

<script src="myFile.js">
    alert( "This is a test" );
</script>

오류 발생 없이 자동으로 실패합니다.

스크립트 태그에서 인라인 JavaScript를 사용하면 작동하지 않는 이유

이 동작의 이유는 스크립트 요소가 외부 또는 인라인 등 단일 소스만 로드할 수 있기 때문입니다. src와 inline 콘텐츠가 모두 있으면 인라인 콘텐츠는 무시됩니다. 따라서:

<script src="script/addScript.js">
    addScript( "script/obj.js" );
    addScript( "script/home/login.js" );
</script>

지정된 스크립트를 로드하지 않습니다.

해결책: 여러 스크립트 요소 사용

여러 스크립트를 로드하려면 각각에 대해 별도의 스크립트 요소를 사용해야 합니다. :

<script src="script/obj.js"></script>
<script src="script/home/login.js"></script>

또는 필요한 스크립트를 동적으로 로드하는 상위 스크립트를 생성할 수 있습니다.

<script>
var scripts = ["script/obj.js", "script/home/login.js"];
for (var i = 0; i < scripts.length; i++) {
  var script = document.createElement("script");
  script.src = scripts[i];
  document.head.appendChild(script);
}
</script>

추가 참고 사항

인라인 JavaScript는 스크립트 요소에서 무시됩니다. 외부 소스를 사용하면 스크립트 요소의 콘텐츠가 DOM에 유지됩니다. 이로 인해 일부 개발자는 외부 스크립트에서 액세스하는 데이터를 저장하는 데 이를 사용하게 되었습니다. 그러나 일반적으로 data-* 속성을 사용하는 것이 이러한 목적에 더 적합하고 깔끔한 접근 방식입니다.

위 내용은 인라인 JavaScript가 외부 소스가 있는 스크립트 태그에서 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!