<script> 태그는 언제 표시되어야하며 왜 그렇게 할 수 있습니까?

142

script스타일있어 요소로 display:block볼 나타납니다. 가능한 이유는 무엇이며 원하는 실제 사용 사례가 있습니까?

td > * {
  display: block;
}

<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>

스 니펫 확장

html css script-tag

— Wutzebaer
소스

55

<style>내용을 편집 할 수있는 보이는 CSS 를 보았습니다 . 실시간으로 효과를 볼 수있는 좋은 방법입니다.

— John Dvorak

19

다음 도전을 위해 의견을 공개 할 수있는 방법을 고안하십시오.

— Mr Lister

11

@JanDvorak와 같은 것을 언급하기 위해 여기에 왔습니다. 처음봤을 때 내 분을 불었다. 코드 펜

— Kjeld Schmidt

6

저를 생각 나게 새벽 출정의 항해 루시는 아슬란을 볼 수 있습니다 주문을 읽고, 그녀는 마법에 영향을 줄 수 있음을 놀라게 때 그에게 당신은 내가 내 자신의 규칙을 거역하는 것이라고 생각 않았다, 그는 기본적으로 말한다?

— David Conrad

4

나는 이것이 기본적인 질문이라고 생각하고 여기에 새로운 것을 배웠습니다. 나는 <3 sof.

— Jacksonkr

104

HTML5 사양 은 사용자 에이전트 (예 : 브라우저)가 사용할 스타일 시트 를 정의합니다 . 섹션 10.3.1 에는 "숨겨진 요소"의 스타일이 나열되어 있습니다.

@namespace url(http://www.w3.org/1999/xhtml);

[hidden], area, base, basefont, datalist, head, link,
meta, noembed, noframes, param, rp, script, source, style, template, track, title {
  display: none;
}

embed[hidden] { display: inline; height: 0; width: 0; }

보다시피,에 적용 display: none;됩니다 script.

이것은 사용자와 숨겨진 script요소 사이의 유일한 "장벽" 입니다. 완벽하게 훌륭하며 작성자 스타일 시트 (및 사용자 스타일 시트 내)의 사용자 에이전트 스타일 시트에서 스타일을 덮어 쓸 수 있습니다.

왜 누군가가 그것을 사용하고 싶을까요? 한 유스 케이스는 이전 요소 와 유사하게 / 와 같은 문자를 이스케이프하지 않고 컨텐츠를 표시합니다<>xmp . 이 script요소는 스크립트뿐만 아니라 데이터 블록 (예 : MIME 유형의 모든 항목)에도 사용할 수 있습니다.

— 또는
소스

데이터는 이미 <script>데이터 블록에 코딩되어 있어야합니다 src.

@PauliSudarshanTerho : 예, 데이터 블록으로 사용되는 경우 요소 src에 속성이 허용되지 않습니다 script.

— unor

71

왜 <script>태그를 볼 수 있습니까?

그것들은 다른 HTML 요소이기 때문에 CSS가 적용되지 않도록 HTML 사양에 특별한 경우 규칙을 작성할 이유가 없습니다 (복잡성을 추가 할 것임).

모든 요소는 스타일을 지정할 수 있습니다. 예를 들면 다음과 같습니다.

head { display: block; }
title { display: block; }
meta { display: block; }
meta[charset]:after { display: block; content: attr(charset); }
meta[content]:after { display: block; content: attr(content); }

원하는 유스 케이스가 있습니까?

물론 일반적인 규칙은 없지만 일반적인 규칙은 적용 할 수있는 모든 것에 적합하지 않습니다 . 그들은 일반적인 경우를 위해 설계되었습니다.

— 쿠엔틴
소스

9

실제로 Chrome 관리자에서 스크립트 태그를 보면 다음과 같은 내용이 표시됩니다.user agent stylesheet: script {display:none}

— Niet the Dark Absol

8

나는 "다른 것과 같은 DOM 요소"를 만들 것입니다. 실제로 이들은 구문 분석 규칙이있는 매우 특수한 HTML 태그입니다.

— Bergi

2

재미있는 사실 : 스크립트 내용이 CDATA로 구문 분석되므로 과거 <script type="text/plain">처럼 사용할 수 <xmp>있지만 여전히 W3C 유효성 검사기와 호환됩니다.

— Mr Lister

2

script {display: block !important;}특별한 경우 규칙이 없을 때 왜 작동 하지 않습니까?

— wutzebaer

3

@wutzebaer 그것은 나를 위해 잘 작동합니다. 당신은 모든 일을 올바르게하고 있습니까? 참고는 것을 script태그뿐만 아니라 시각적 요소에 있어야합니다 - 그것은 단지 당신이 표시됩니다 script예하지, 몸이야 head기본적으로.

— Luaan

36

또 다른 (일반적이지 않은) 사용 사례 :

<script>스타일 가이드에서 간단한 HTML 코드 예제에 태그를 사용하는 경우가 있습니다 . 그렇게하면 HTML 태그와 특수 문자를 벗어날 필요가 없습니다. 그리고 텍스트 편집기 태그 자동 완성 및 구문 강조는 여전히 작동합니다. 그러나 브라우저에서 구문 강조를 쉽게 추가 할 수있는 방법은 없습니다.

script[type="text/example"] {
    background-color: #33373c;
    border: 1px solid #ccc;
    color: #aed9ef;
    display: block;
    font-family: monospace;
    overflow: auto;
    padding: 2px 10px 16px;
    white-space: pre-wrap;
    word-break: break-all;
    word-wrap: break-word;
}

<p>Here comes a code example:</p>
<script type="text/example">
  <div class="cool-component">
     Some code example
  </div>
</script>

스 니펫 확장

— jfrej
소스

2

유효한 MIME 유형 : text/html을 사용하고 class="codesample"스타일을 적용 하는 것과 같은 것을 사용하는 것이 좋습니다 . 단지 의문의 이유

— 만으로도

5

@NiettheDarkAbsol : 언젠가는 어떤 브라우저가 어떤 방식으로 그 유형의 스크립트 요소를 구문 분석하고 실행하기로 결정할 수있는 경우를 대비하여 "실제"MIME 유형 (또는 미래에 하나가 될 수있는 것)을 사용 하지 않는 것이 더 안전 할 것입니다. 즉, x-사용자 정의 유형에 표준 접두어 를 사용하는 것이 text/x-example좋습니다.

— Ilmari Karonen

14

가능한 사용 사례 : 디버깅 목적.

예를 들어 문서 수준에서 수업을 적용 할 수 있습니다. <body class="debugscript">그런 다음 CSS를 사용하십시오.

body.debugscript script {
    display: block;
    background: #fcc;
    border: 1px solid red;
    padding: 2px;
}
body.debugscript script:before {
    content: 'Script:';
    display: block;
    font-weight: bold;
}
body.debugscript script[src]:before {
    content: 'Script: ' attr(src);
}

— 어둠의 절대자 니엣
소스

1

왜 안돼 <html class="debugscript">?

— Bergi

@Bergi <head>스크립트 <head>자체도 공개하지 않기 때문에 스크립트를 공개하지 않을 수도 있지만 옵션 display:none으로 강제로 공개해야하기 때문에 더 많은 문제가 발생할 수 있습니다.

— 어둠의 절대자 니트

10

당신은 "추가 재미"또는 "추가 디버깅 가능성"을 의미합니다 :-)

— Bergi

1

스크립트 태그는 기본적으로를 사용하여 숨겨집니다 display:none;. Unor ¹ 은 기본 언어 사양을 설명합니다. 그러나 여전히 DOM의 일부이므로 스타일을 지정할 수 있습니다.

즉, 스크립트 태그가 수행하는 작업을 정확하게 기억하는 것이 중요합니다. 이전에는 유형과 언어가 동반되었지만 더 이상 필요하지 않습니다. 이제 JavaScript가 존재한다고 가정하고 결과적으로 브라우저는 이러한 태그에서 스크립트가 발견되거나로드 될 때 스크립트를 해석하고 실행합니다.

스크립트가 실행되면 태그의 내용은 페이지의 텍스트 (종종 숨겨져 있음)입니다. 이 텍스트는 표시 할 수 있지만 텍스트 일 뿐이 므로 제거 할 수도 있습니다 .

페이지 하단에서 닫는 </html>태그 바로 앞에 텍스트와 함께 이러한 태그를 매우 쉽게 제거 할 수 있으며 페이지에 변경 사항이 없습니다.

예를 들면 다음과 같습니다.

(function(){
    var scripts = document.querySelectorAll("script");
    for(var i = 0; i < scripts.length; i++){
        scripts[i].parentNode.removeChild(scripts[i]);
    }
})()

페이지 상태가 이미 변경되어 현재 전역 실행 컨텍스트에 반영되므로 기능이 제거되지 않습니다. 예를 들어, 페이지에 jQuery와 같은 라이브러리가로드 된 경우 태그를 제거해도 jQuery가 이미 페이지의 런타임 환경에 추가 되었기 때문에 더 이상 노출되지 않습니다. 본질적으로 DOM 검사 도구는 스크립트 요소를 표시하지 않지만, 한 번 실행 된 스크립트 요소는 실제로 텍스트 일뿐임을 강조합니다.

_{1. unor, 2016 년 7 월 7 일, wutzebaer, "태그가 언제 표시되어야하며 왜 그렇게 할 수 있습니까?", Jul 1 at 10:53, https://stackoverflow.com/a/38147398/1026459}

— 트래비스 J
소스