자체 종료 스크립트 요소가 작동하지 않는 이유는 무엇입니까?

https://stackoverflow.com/questions/69913

09-06-2019
|

문제

브라우저가 올바르게 인식하지 못하는 이유는 무엇입니까?

<script src="foobar.js" /> <!-- self-closing script element -->

이것만 인식됩니다:

<script src="foobar.js"></script>

이것이 XHTML 지원 개념을 깨뜨립니까?

메모:이 설명은 적어도 모든 IE(6-8 베타 2)에서는 정확합니다.

해결책

XHTML 1 사양은 다음과 같이 말합니다.

С.3.요소 최소화 및 빈 요소 콘텐츠

콘텐츠 모델이 아닌 요소의 빈 인스턴스가 있는 경우 EMPTY (예: 빈 제목이나 단락) 최소화된 형식을 사용하지 마십시오(예:사용 <p> </p> 그리고는 아니다 <p />).

XHTML DTD 스크립트 요소를 다음과 같이 지정합니다.

<!-- script statements, which may include CDATA sections -->
<!ELEMENT script (#PCDATA)>

다른 팁

Brad와 Squadette의 말에 덧붙이자면, 자체 폐쇄 XML 구문은 <script /> 실제로 ~이다 올바른 XML이지만 실제로 작동하려면 웹 서버도 다음과 같은 XML mimetype을 사용하여 적절한 형식의 XML로 문서를 보내야 합니다. application/xhtml+xml HTTP Content-Type 헤더(그리고 ~ 아니다 ~처럼 text/html).

그러나 XML MIME 유형을 보내면 IE7에서 페이지를 구문 분석하지 못하게 됩니다. text/html.

에서 w3:

요약하면, 'application/xhtml+xml'은 XHTML 가족 문서에 사용해야하며 'Text/Html'의 사용은 HTML과 호환 XHTML 1.0 문서로 제한되어야합니다.'Application/XML'및 'Text/XML'도 사용할 수 있지만, 적절할 때마다 'Application/XHTML+XML'은 일반적인 XML 미디어 유형보다는 사용해야합니다.

나는 몇 달 전에 이 문제에 대해 의아해했고 실행 가능한 유일한 솔루션(FF3+ 및 IE7과 호환)은 이전 버전을 사용하는 것이었습니다. <script></script> 구문 text/html (HTML 구문 + HTML MIME 유형).

서버가 다음을 보내는 경우 text/html HTTP 헤더에 입력하면 다른 형식의 XHTML 문서가 있어도 FF3+는 HTML 렌더링 모드를 사용합니다. <script /> 작동하지 않습니다(이것은 변경 사항입니다. 이전에는 Firefox가 덜 엄격했습니다).

이것은 어떤 조작과 관계없이 발생합니다. http-equiv 문서 내부의 메타 요소, XML 프롤로그 또는 문서 유형 - Firefox는 text/html HTML 또는 XML 파서가 문서 내부를 보는지 여부를 결정하고 HTML 파서가 문서를 이해하지 못하는지 여부를 결정하는 헤더 <script />.

궁금한 사람이 있다면 궁극적인 이유는 HTML이 원래 XML의 이상한 형인 SGML의 방언이기 때문입니다.SGML-land에서 요소는 DTD에서 자체 폐쇄형(예:BR, HR, INPUT), 암시적으로 종료 가능(예:P, LI, TD) 또는 명시적으로 닫을 수 있습니다(예:테이블, DIV, 스크립트).물론 XML에는 이에 대한 개념이 없습니다.

최신 브라우저에서 사용하는 태그 수프 파서는 이 레거시에서 발전했지만 해당 파싱 모델은 더 이상 순수한 SGML이 아닙니다.물론 신중하게 제작된 XHTML은 XML MIME 유형으로 전송하지 않는 한 잘못 작성된 SGML에서 영감을 받은 태그 수프로 취급됩니다.이 이유도...

<p><div>hello</div></p>

...브라우저에서 다음과 같이 해석됩니다.

<p></p><div>hello</div><p></p>

...이것은 DOM에 대해 코딩을 시도할 때 문제를 일으킬 수 있는 사랑스럽고 모호한 버그의 비법입니다.

다른 사람들은 "어떻게"라고 대답하고 사양을 인용했습니다.여기에 "왜 안돼?"라는 실제 이야기가 있습니다. <script/>", 버그 보고서와 메일링 리스트를 몇 시간 동안 조사한 후.

HTML4

HTML 4는 다음을 기반으로 합니다. SGML.

SGML에는 몇 가지가 있습니다. 단축 태그, 와 같은 <BR//, <B>text</>, <B/text/, 또는 <OL<LI>item</LI</OL>.XML은 첫 번째 형식을 취하고 끝을 ">"(SGML은 유연함)로 재정의합니다. <BR/>.

그러나 HTML은 재정의되지 않았으므로 <SCRIPT/> ~해야 한다 평균 <SCRIPT>>.
(예, '>'는 콘텐츠의 일부여야 하며 태그는 여전히 ~ 아니다 닫은.)

분명히 이것은 XHTML과 호환되지 않으며 ~ 할 것이다 많은 사이트 중단(브라우저가 충분히 성숙할 때까지) 걱정하다 이것에 관해서), 그래서 아무도 단축 태그를 구현하지 않았습니다. 그리고 사양 그들에 대해 조언한다.

사실상, 모든 '작동하는' 자체 종료 태그는 기술적으로 부적합한 파서에 선택적 종료 태그가 있는 태그이며 실제로는 유효하지 않습니다.W3C였습니다. 이 해킹을 생각해 냈어 XHTML로의 전환을 돕기 위해 HTML 호환.

그리고 <script>의 종료 태그는 다음과 같습니다. 선택사항이 아님.

"자동 종료" 태그는 HTML 4의 해킹이며 의미가 없습니다.

HTML5

HTML5에는 다섯 가지 유형의 태그 'void' 및 'foreign' 태그만 있습니다. 자동 폐쇄가 허용됨.

왜냐하면 <script> 무효가 아니다(그것은 5월 콘텐츠가 있고) 외부 콘텐츠(예: MathML 또는 SVG)가 아닙니다. <script> 어떻게 사용하든 자동으로 닫힐 수 없습니다.

그런데 왜?그것을 외국 것으로 간주하거나 특별한 경우를 만들 수는 없습니까?

HTML 5의 목표는 다음과 같습니다. 구버전과 호환되는 ~와 함께 구현 HTML 4와 XHTML 1의SGML이나 XML을 기반으로 하지 않습니다.그 구문은 주로 구현을 문서화하고 통합하는 것과 관련이 있습니다.(이는 이유 <br/> <hr/> 등.~이다 유효한 HTML 5 HTML4가 유효하지 않음에도 불구하고.)

자동 폐쇄 <script> 구현이 다른 태그 중 하나입니다.그것 Chrome, Safari에서 작업했었습니다., 그리고 오페라;내 지식으로는 Internet Explorer나 Firefox에서는 작동하지 않았습니다.

이 논의되었다 HTML 5가 초안 작성 중이었으나 거부되었습니다. 휴식 브라우저 호환성.자체 닫기 스크립트 태그가 있는 웹페이지는 이전 브라우저에서 올바르게 렌더링되지 않을 수 있습니다.있었다 다른 제안, 그러나 호환성 문제도 해결할 수 없습니다.

초안이 출시된 후 WebKit은 파서를 준수하도록 업데이트했습니다.

자동 폐쇄 <script> HTML 4 및 XHTML 1과의 하위 호환성으로 인해 HTML 5에서는 이러한 현상이 발생하지 않습니다.

XHTML 1 / XHTML 5

언제 정말 XHTML로 제공되었으며, <script/> 정말 폐쇄적이어서 다른 답변 밝혔습니다.

그 외에는 사양에 따르면 그것 ~해야 한다 HTML로 제공되었을 때 작동했습니다.

XHTML 문서 ...대부분의 HTML 브라우저와 호환되므로 인터넷 미디어 유형 "text/html" [RFC2854]로 표시될 수 있습니다.

그래서 무슨 일이 일어났나요?

사람들 모질라에게 물었다 에게 Firefox가 구문 분석하도록 하세요 다음과 같은 문서를 준수합니다. XHTML 지정된 콘텐츠 헤더( 콘텐츠 스니핑).이렇게 하면 자동으로 닫히는 스크립트와 콘텐츠 스니핑이 가능해졌습니다. 필요했다 어쨌든 웹 호스팅 업체가 올바른 헤더를 제공할 만큼 성숙하지 않았기 때문입니다.IE는 잘한다.

만약 첫 번째 브라우저 전쟁 IE 6으로 끝나지 않았으므로 XHTML도 목록에 있었을 수 있습니다.그러나 그것은 끝났습니다.그리고 IE 6 문제가 있다 XHTML로.사실 IE 지원하지 않았다 올바른 MIME 유형 조금도, 강제 모든 사람 사용 text/html IE 때문에 XHTML의 경우 큰 시장 점유율을 가지고 있었습니다 10년 내내요.

콘텐츠 스니핑도 가능 될 수 있다 정말 나쁘다 그리고 사람들이 말하길 그것은 중지되어야한다.

마지막으로 W3C는 XHTML이 스니핑 가능하다는 의미는 아니었습니다.:문서는 둘 다, HTML 및 XHTML, 그리고 Content-Type 규칙.그들은 "그냥 우리의 사양을 따르세요"라는 입장을 굳건히 지키고 있다고 말할 수 있습니다. 실용적인 것을 무시하고.실수는 계속되는 이후 XHTML 버전으로.

아무튼 이번 결정은 문제를 해결했다 파이어폭스용.Chrome보다 7년 전이었습니다. 태어났다;다른 중요한 브라우저는 없었습니다.그리하여 결정되었습니다.

다음 사양으로 인해 문서 유형만 지정하면 XML 구문 분석이 트리거되지 않습니다.

Internet Explorer 8 이하에서는 XHTML 구문 분석을 지원하지 않습니다.XML 선언 및/또는 XHTML 문서 유형을 사용하더라도 이전 IE는 여전히 문서를 일반 HTML로 구문 분석합니다.그리고 일반 HTML에서는 자체 닫는 구문이 지원되지 않습니다.후행 슬래시는 무시됩니다. 명시적인 닫는 태그를 사용해야 합니다.

XHTML 구문 분석을 지원하는 브라우저도 마찬가지입니다. IE 9 이상, XML 콘텐츠 유형으로 문서를 제공하지 않는 한 문서를 HTML로 구문 분석합니다.하지만 이 경우 이전 IE에서는 문서가 전혀 표시되지 않습니다!

위의 사람들은 이미 이 문제에 대해 거의 설명했습니다. 그러나 한 가지 분명한 점은 사람들이 <br/> 그리고 HTML 문서에서는 항상 / 이러한 위치에서는 기본적으로 무시되며 XML과 HTML로 구문 분석할 수 있는 항목을 만들 때만 사용됩니다.노력하다 <p/>foo</p>, 예를 들어 일반 단락이 표시됩니다.

자체 닫는 스크립트 태그는 작동하지 않습니다. 왜냐하면 스크립트 태그에는 인라인 코드가 포함될 수 있고 HTML은 속성의 존재 여부에 따라 해당 기능을 켜거나 끌 만큼 똑똑하지 않기 때문입니다.

반면에 HTML은 외부 리소스에 대한 참조를 포함시키는 훌륭한 태그를 가지고 있습니다.그만큼 <link> 태그가 있고 자체적으로 폐쇄 될 수 있습니다.스타일 시트, RSS 및 원자 공급, 표준 URI 및 기타 모든 종류의 제품을 포함하는 데 이미 사용되었습니다.JavaScript가 아닌 이유는 무엇입니까?

스크립트 태그를 자체적으로 묶으려면 내가 말한 대로 그렇게 할 수 없습니다. 그러나 현명한 방법은 아니지만 대안이 있습니다.자체 닫는 링크 태그를 사용하고 아래와 같이 text/javascript 및 rel 유형을 스크립트로 제공하여 JavaScript에 연결할 수 있습니다.

<link type="text/javascript" rel ="script" href="/path/tp/javascript" />

XML 및 XHTML과 달리 HTML에는 자체 닫는 구문에 대한 지식이 없습니다.XHTML을 HTML로 해석하는 브라우저는 / 문자는 태그가 자동으로 닫혀야 함을 나타냅니다.대신 그들은 그것을 빈 속성처럼 해석하고 파서는 여전히 태그가 '개방'이라고 생각합니다.

그냥 <script defer> 다음과 같이 취급된다 <script defer="defer">, <script /> 다음과 같이 취급된다 <script /="/">.

Internet Explorer 8 이하에서는 XHTML에 대한 적절한 MIME 유형을 지원하지 않습니다. application/xhtml+xml.XHTML을 다음과 같이 제공하는 경우 text/html, 이전 버전의 Internet Explorer에서 작업을 수행하려면 HTML 4.01로 해석됩니다.닫는 태그를 생략할 수 있는 요소에는 짧은 구문만 사용할 수 있습니다.참조 HTML 4.01 사양.

XML '약식'은 /라는 속성으로 해석됩니다. 이 속성은 (등호가 없기 때문에) "/"라는 암시적 값을 갖는 것으로 해석됩니다.이것은 HTML 4.01에서는 엄연히 잘못된 것입니다. 선언되지 않은 속성은 허용되지 않습니다. 그러나 브라우저는 이를 무시합니다.

IE9 이상 XHTML 5 지원 함께 일했다 application/xhtml+xml.

SCRIPT TAG가 VOID ELEMENT가 아니기 때문입니다.

에 HTML 문서 - 보이드 요소 하지 마라 "닫는 태그"가 전혀 필요하지 않습니다!

~ 안에 xhtml, 모든 것이 일반이므로 모두 필요합니다. 종료 예를 들어"닫는 태그";간단한 줄 바꿈인 br을 포함하면 다음과 같습니다. <br></br> 아니면 그 속기 <br />.

그러나 스크립트 요소는 결코 공백이거나 파라메트릭 요소가 아닙니다. 스크립트 태그 무엇보다 먼저 데이터 설명 선언이 아닌 브라우저 명령이 있습니다.

원칙적으로 의미론적 종료 명령(예: "닫는 태그")은 의미론이 후속 태그에 의해 종료될 수 없는 처리 명령에만 필요합니다.예를 들어:

<H1> 의미론은 다음으로 종료될 수 없습니다. <P> 이전 H1 명령어 세트를 재정의하여 종료할 만큼 자체 의미 체계가 충분하지 않기 때문입니다.비록 그것이 깰 수는 있겠지만 개울 새 단락 줄에 추가하면 현재 글꼴 크기 및 스타일 줄 높이를 재정의할 만큼 "충분히 강하지" 않습니다. 시냇물을 쏟아 붓는다, 즉 H1에서 누출됩니다(P에는 H1이 없기 때문에).

이것이 "/"(종료) 신호가 발명된 방법과 이유입니다.

일반 설명 없음 종료 태그 좋아요 < />, 발생한 캐스케이드에서 단일 추락에 충분했을 것입니다. 예: <H1>Title< /> 그러나 항상 그런 것은 아닙니다. 왜냐하면 우리는 Stream의 다중 중간 태깅을 "중첩"할 수도 있기를 원하기 때문입니다.다른 폭포로 포장/떨어지기 전에 급류로 분할됩니다.결과적으로 다음과 같은 일반 종결자는 < /> 종료할 부동산의 대상을 결정할 수 없습니다.예를 들어: <b>용감한 <i>굵은 이탤릭체 < /> 이탤릭체 </>정상.의심할 바 없이 우리의 의도를 올바르게 이해하는 데 실패하고 아마도 다음과 같이 해석할 것입니다. 용감한 굵은 이탤릭체 용감한 정상.

이 방법은 개념 포장지, 즉 컨테이너가 탄생했습니다.(이러한 개념은 너무 유사하여 식별이 불가능하며 때로는 동일한 요소가 두 가지를 모두 가질 수도 있습니다. <H1> 래퍼이자 컨테이너입니다.반면 <B> 의미론적 래퍼만 있음).의미가 없는 일반 컨테이너가 필요합니다.그리고 물론 DIV 요소의 발명도 이루어졌습니다.

DIV 요소는 실제로 2BR-컨테이너입니다.물론 CSS의 출현은 전체 상황을 그렇지 않은 경우보다 더 이상하게 만들었고 간접적으로 많은 큰 결과를 초래하는 큰 혼란을 야기했습니다!

CSS를 사용하면 새로 개발된 DIV의 기본 사전 및 사후 BR 동작을 쉽게 재정의할 수 있기 때문에 이를 "아무 것도 하지 않는 컨테이너"라고도 합니다.그것은 당연히 잘못된 것입니다!DIV는 블록 요소이며 기본적으로 종료 신호 전후에 스트림 라인을 끊습니다.곧 웹은 페이지 DIV-itis로 고통받기 시작했습니다.대부분은 여전히 그렇습니다.

모든 HTML 태그의 기본 동작을 완전히 재정의하고 완전히 재정의하는 기능을 갖춘 CSS의 등장은 어떻게든 HTML 존재의 전체 의미를 혼란시키고 모호하게 만들었습니다.

갑자기 모든 HTML 태그가 쓸모없어진 것처럼 보였고 원래의 의미, 정체성 및 목적이 모두 제거되었습니다.어쨌든 당신은 그것들이 더 이상 필요하지 않다는 인상을 받게 될 것입니다.속담:모든 데이터 표현에는 단일 컨테이너 래퍼 태그로 충분합니다.필수 속성만 추가하면 됩니다.대신 의미 있는 태그를 사용하는 것은 어떨까요?진행하면서 태그 이름을 만들고 나머지는 CSS가 처리하도록 하세요.

이것이 xhtml이 탄생한 방식이며, 물론 새로 온 사람들이 막대한 대가를 치르고 무엇이 무엇인지, 그리고 그 빌어먹을 목적이 무엇인지에 대한 왜곡된 비전이 탄생한 방식입니다.W3C는 World Wide Web에서 무엇이 잘못되었나요, 동지들로 바뀌었나요?!!

HTML의 목적은 스트리밍하다 인간 수신자에게 의미 있는 데이터입니다.

정보를 전달합니다.

공식적인 부분은 정보 전달의 명확성을 돕기 위한 것입니다.xhtml은 정보를 조금도 고려하지 않습니다.- 그 정보는 전혀 관련이 없습니다.

문제에서 가장 중요한 것은 그것을 알고 이해할 수 있는 것입니다. xhtml은 확장된 HTML의 단순한 버전이 아닙니다., xhtml은 완전히 다른 짐승입니다.근거;따라서 별도로 보관하는 것이 현명합니다.

'진정한 XHTML', '가짜 XHTML' 및 HTML의 차이점과 서버에서 보낸 MIME 유형의 중요성은 이미 여기에 잘 설명되어 있습니다.지금 당장 시험해 보고 싶으시다면, 가능한 브라우저를 위한 자체 폐쇄형 스크립트 태그를 포함하여 실시간 미리보기가 포함된 간단하고 편집 가능한 스니펫이 있습니다.

div { display: flex; }
div + div {flex-direction: column; }

<div>Mime type: <label><input type="radio" onchange="t.onkeyup()" id="x" checked  name="mime"> application/xhtml+xml</label>
<label><input type="radio" onchange="t.onkeyup()" name="mime"> text/html</label></div>
<div><textarea id="t" rows="4" 
onkeyup="i.src='data:'+(x.checked?'application/xhtml+xml':'text/html')+','+encodeURIComponent(t.value)"
><?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"
[<!ENTITY x "true XHTML">]>
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
  <p>
    <span id="greet" swapto="Hello">Hell, NO :(</span> &x;.
    <script src="data:text/javascript,(g=document.getElementById('greet')).innerText=g.getAttribute('swapto')" />
    Nice to meet you!
    <!-- 
      Previous text node and all further content falls into SCRIPT element content in text/html mode, so is not rendered. Because no end script tag is found, no script runs in text/html
    -->
  </p>
</body>
</html></textarea>

<iframe id="i" height="80"></iframe>

<script>t.onkeyup()</script>
</div>

넌 봐야 해 Hello, true XHTML. Nice to meet you! 텍스트 영역 아래.

사용할 수 없는 브라우저의 경우 텍스트 영역의 내용을 복사하여 다음과 같은 파일로 저장할 수 있습니다. .xhtml (또는 .xht) 확대 (이 힌트를 주신 Alek에게 감사드립니다.).

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow