HTML에서
script 태그의 역할은 무엇인가요? 스크립트 태그에서 type 속성의 사용법은 무엇입니까? 이번 글에서는 주로 HTML 스크립트 태그 관련 지식과 기능, 스크립트 태그의 type 속성 사용법에 대해 설명합니다. 🎜#
이 기능이 개선되면서 자주 사용되는 스크립트에 대해 얼마나 알고 계시나요? 스크립트 태그, async 및 defer, crossorigin, for/event 등과 같은 일부 html5 항목이 추가되었습니다.아시다시피 스크립트 태그는 웹페이지에서 어떤 자바스크립트가 실행되는지 지정하는 데 사용됩니다. 스크립트 태그는 JavaScript 코드를 직접 포함하거나 JavaScript 외부 URL을 가리킬 수 있습니다.
스크립트 태그는 나타나는 순서대로 실행됩니다. 다음 코드는 이를 직관적으로 보여줍니다.<script> var x = 3; </script> <script> alert(x); // Will alert '3'; </script>
<script src="//typekit.com/fj5j4j3.js"></script> <!-- 在Type套件已执行或超时之前，此第二脚本不会执行。 --> <script src="//my.site/script.js"></script>
<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>
</head>
<body>
<script>
// document.head is available
// document.body is available
</script>
</body>
</html>async
은 "바로 실행하지 않음"을 의미합니다. 좀 더 구체적으로 말하면 다음과 같습니다. 전체 페이지가 로드된 후 이 스크립트를 다른 스크립트 뒤에 놓아도 괜찮습니다. 이는 페이지의 다른 코드가 통계 스크립트 실행에 의존할 필요가 없기 때문에 통계 분석 스크립트에 매우 유용합니다. 비동기 코드가 실제로 언제 실행될지 알 수 없기 때문에 페이지에 필요한 변수나 함수를 정의하는 것은 비동기 코드에서 불가능합니다.defer은 "실행하기 전에 페이지가 구문 분석될 때까지 대기"를 의미합니다. 이는 스크립트를 DOMContentedLoaded 이벤트에 바인딩하거나 jQuery.ready를 사용하는 것과 거의 동일합니다. 이 코드가 실행되면 DOM의 모든 요소를 사용할 수 있습니다. 비동기와 달리 모든 연기 스크립트는 HTML 페이지에 나타나는 순서대로 실행되며 HTML 페이지가 구문 분석될 때까지 연기됩니다.
html의 스크립트 태그에 있는 type 속성 사용:
역사적으로(Netsacpe 2 탄생 이후) 스크립트 태그에 있음 type=text/javascript라고 쓰여 있는지 여부는 중요하지 않습니다. type을 통해 JavaScript가 아닌 MIME 유형을 설정하면 브라우저는 이를 실행하지 않습니다. 자신만의 언어를 정의하고 싶을 때 유용합니다.<script type="text/emerald">
make a social network
but for cats
</script><script>
var codez = document.querySelectorAll('script[type="text/emerald"]');
for (var i=0; i < codez.length; i++)
runEmeraldCode(codez[i].innerHTML);
</script><meta http-equiv="Content-Script-Type" content="text/vbscript">
crossorigin을 사용할 수 있습니다
완전히 표준화되지는 않았지만 일부 브라우저는 crossorigin 속성을 지원합니다. 기본 아이디어는 브라우저가 원본이 아닌 리소스의 사용을 제한한다는 것입니다(동종 리소스는 동일한 프로토콜, 호스트 이름 및 포트입니다(예: `http://google.com:80)).이는 예를 들어 경쟁사 웹사이트에 해당 웹사이트의 사용자 계정을 로그아웃하도록 요청하는 것을 방지하기 위한 것입니다(좋지 않습니다!). 이 문제가 스크립트 태그와 관련되어 있다는 것은 다소 예상치 못한 일이지만, crossorigin이 구현된 경우 window.onerror 이벤트에 핸들러만 추가하면 되며 콘솔에 몇 가지 경고 메시지가 표시되어 이를 도입하라는 메시지가 표시됩니다. 외부 스크립트를 도입해서는 안 됩니다. 보안 브라우저에서는 crossorigin 속성을 지정하지 않는 한 외부 스크립트 로드가 오류 없이 작동합니다.
crossorgin은 마법의 보안 트릭이 아니며 브라우저에서 일반적인 CORS 액세스 확인을 활성화하고 OPTIONS 요청을 수행하며 Access-Control 헤더를 확인하도록 하는 것뿐입니다.html 스크립트 태그 및 innerHTML:
通过 DOM 动态添加到页面上的 script 标签会被浏览器执行：
var myScript = document.createElement('script');
myScript.textContent = 'alert("?")';
document.head.appendChild(myScript);通过 innerHTML 动态添加到页面上的 script 标签则不会被执行：
document.head.innerHTML += '<script>alert("?")</script>';为什么会是这样的原因不是很确定，但是它解决了一个小问题：“是否有一个办法让一个 script 标签在 Chrome 代码检查器中显示但不实际执行？”
【相关推荐】
위 내용은 HTML에서 스크립트 태그의 역할은 무엇입니까? 스크립트 태그에서 type 속성의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
