แท็ก <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

ฉันเห็น CSS ที่มองเห็นได้<style>พร้อมเนื้อหาที่แก้ไขได้ เป็นวิธีที่ดีที่จะเห็นผลในเวลาจริง

— John Dvorak

19

สำหรับความท้าทายครั้งต่อไปของคุณลองคิดหาวิธีที่จะแสดงความคิดเห็น

— Mr Lister

11

มาที่นี่เพื่อพูดถึงสิ่งเดียวกัน @JanDvorak เป่านาทีของฉันในครั้งแรกที่ฉันเห็นมัน ฉันได้สาธิตเรื่องนี้ในcodepen

— Kjeld Schmidt

6

เตือนฉันเกี่ยวกับThe Voyage of the Dawn Treaderเมื่อลูซี่อ่านคาถาที่ทำให้ Aslan มองเห็นได้และเธอแปลกใจที่เวทมนตร์จะส่งผลกระทบต่อเขาและเขาก็พูดว่าโดยพื้นฐานแล้วคุณคิดว่าฉันจะฝ่าฝืนกฎของตัวเองหรือไม่?

— David Conrad

4

ฉันเข้ามาที่นี่โดยคิดว่านี่เป็นคำถามพื้นฐานและไม่ต้องเรียนรู้อะไรใหม่ ฉัน <3 โซ

— 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)

— UNOR
แหล่งที่มา

ข้อมูลจะต้องมีการเข้ารหัสแล้วลงใน<script>- บล็อกข้อมูลไม่สามารถโหลดsrcได้

@PauliSudarshanTerho: ใช่ถ้าใช้เป็นบล็อกข้อมูลที่srcแอตทริบิวต์ไม่ได้รับอนุญาตในscriptองค์ประกอบ

— unor

71

เหตุใด<script>แท็กจึงมองเห็นได้

เนื่องจากเป็นองค์ประกอบ HTML เหมือนกันและไม่มีเหตุผลที่จะเขียนกฎกรณีพิเศษในข้อกำหนด HTML (ซึ่งจะเพิ่มความซับซ้อน) เพื่อป้องกัน CSS จากการใช้กับพวกเขา

องค์ประกอบใด ๆ ที่สามารถสไตล์ ยกตัวอย่างเช่น

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); }

มี Usecase ที่ต้องการหรือไม่?

แน่นอนไม่มีกฎทั่วไป แต่กฎทั่วไปไม่ได้ถูกออกแบบมาให้เหมาะสม ทุกสิ่งที่คุณสามารถนำไปใช้ได้ พวกเขาถูกออกแบบมาสำหรับกรณีทั่วไป

— เควนติน
แหล่งที่มา

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-type ที่ถูกต้อง: text/htmlและใช้สิ่งที่ต้องการclass="codesample"ใช้สไตล์ เพียงเหตุผลอวดดี: D

— Niet the Dark Absolut

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);
}

— Niet the Dark Absolute
แหล่งที่มา

1

ทำไม<html class="debugscript">ล่ะ

— Bergi

@Bergi นั่นเป็นตัวเลือกด้วยเช่นกันแม้ว่ามันอาจจะไม่เปิดเผย<head>สคริปต์เพราะ<head>ตัวมันเองก็มีdisplay:noneเช่นกันดังนั้นคุณต้องบังคับให้เปิดเผยสิ่งนั้นซึ่งอาจนำไปสู่ภาวะแทรกซ้อนต่อไป

— Niet the Dark Absolute

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, Thu Jul 07 2016, wutzebaer, "ควรจะมองเห็นแท็กได้เมื่อใดและทำไมจึงสามารถทำได้", 1 ก.ค. เวลา 10:53, https://stackoverflow.com/a/38147398/1026459}

— เทรวิสเจ
แหล่งที่มา