Kapan tag <script> terlihat dan mengapa bisa?

142

Sebuah scriptelemen yang mendapat bergaya sebagai display:blockmuncul terlihat. Mengapa itu mungkin dan apakah ada kasus penggunaan nyata yang diinginkan?

td > * {
  display: block;
}
<table>
  <tr>
    <td>
      <script type="text/javascript">
        var test = 1;
      </script>von 1
    </td>
  </tr>
</table>
Luaskan cuplikan

html css script-tag wutzebaer
sumber
55
Saya telah melihat CSS yang terlihat <style>dengan konten yang dapat diedit. Cara yang bagus untuk melihat efek secara real time.
John Dvorak
19
Untuk tantangan Anda berikutnya, cari cara untuk membuat komentar terlihat.
Tn. Lister
11
Datang ke sini untuk menyebutkan hal yang sama, @JanDvorak. Hancurkan min saya saat pertama kali melihatnya. Saya punya demonstrasi ini di codepen
Kjeld Schmidt
6
Mengingatkan saya pada The Voyage of the Dawn Treader ketika Lucy membaca mantra yang membuat Aslan terlihat, dan dia terkejut bahwa sihir akan mempengaruhi dia , dan dia pada dasarnya mengatakan, apakah Anda pikir saya akan mematuhi aturan saya sendiri?
David Conrad
4
Saya datang ke sini berpikir ini adalah pertanyaan mendasar dan pergi setelah mempelajari sesuatu yang baru. Saya <3 sof.
Jacksonkr

Jawaban:

104

Spesifikasi HTML5 mendefinisikan lembar gaya yang diharapkan digunakan oleh agen pengguna (seperti browser). Bagian 10.3.1 mencantumkan gaya untuk "Elemen tersembunyi":

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

Seperti yang Anda lihat, ini berlaku display: none;untuk script.

Ini adalah satu-satunya "penghalang" antara pengguna Anda dan scriptelemen tersembunyi . Ini sangat bagus dan dimaksudkan untuk dapat menimpa gaya dari style sheet agen-pengguna di dalam style sheet penulis (dan tentu saja juga di dalam style style pengguna).

Mengapa seseorang mungkin ingin menggunakannya? Satu use case adalah menampilkan konten tanpa harus melarikan diri karakter seperti </> , mirip dengan xmpelemen yang lama . The scriptelemen dapat digunakan tidak hanya untuk script, tetapi juga untuk blok data (yaitu, untuk apa pun dengan tipe MIME).

unor
sumber
Data harus sudah dikodekan ke dalam <script> - blok data tidak dapat dimuat oleh src.
@ PauliSudarshanTerho: Ya, jika digunakan sebagai blok data, srcatribut tidak diperbolehkan pada scriptelemen.
unor
71

Mengapa <script>Tag dapat terlihat?

Karena mereka adalah elemen HTML seperti yang lain dan tidak ada alasan untuk menulis aturan kasus khusus dalam spesifikasi HTML (yang akan menambah kerumitan) untuk mencegah CSS menerapkannya.

Setiap elemen dapat ditata. Ambil, misalnya:

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

Apakah ada Usecase yang diinginkan?

Tentu saja tidak ada yang umum, tetapi aturan umum tidak dirancang untuk masuk akal untuk segala sesuatu yang dapat Anda terapkan. Mereka dirancang untuk kasus-kasus umum.

Quentin
sumber
9
Bahkan jika Anda melihat tag skrip di inspektur Chrome, Anda tahuuser agent stylesheet: script {display:none}
Niet the Dark Absol
8
Saya akan membuat "elemen DOM seperti yang lain". Sebenarnya mereka adalah tag HTML yang cukup istimewa dengan aturan parsing mereka.
Bergi
2
Fakta menyenangkan: karena konten skrip diuraikan sebagai CDATA, Anda dapat menggunakan <script type="text/plain">seperti <xmp>sebelumnya, tetapi masih kompatibel dengan validator W3C.
Tn. Lister
2
mengapa script {display: block !important;}tidak bekerja ketika tidak ada aturan kasus khusus?
wutzebaer
3
@wutzebaer Ini berfungsi dengan baik untuk saya. Apakah Anda yakin Anda melakukan semuanya dengan benar? Perhatikan bahwa scripttag juga harus dalam elemen yang terlihat - tag hanya akan menampilkan Anda scriptdi badan, bukan eg headsecara default.
Luaan
36

Kasus penggunaan lain (tidak umum):

Saya terkadang menggunakan <script>tag untuk contoh kode HTML singkat dalam panduan gaya. Dengan begitu saya tidak perlu lari dari tag HTML dan karakter khusus. Dan tag editor teks autocomplete dan syntax highlighting masih berfungsi. Tapi tidak ada cara mudah untuk menambahkan highlight sintaks di browser.

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>
Luaskan cuplikan

jfrej
sumber
2
Tidak buruk, meskipun saya akan menyarankan menggunakan tipe MIME yang valid:, text/htmldan menggunakan sesuatu seperti class="codesample"untuk menerapkan gaya. Hanya karena alasan yang tidak masuk akal: D
Niet the Dark Absol
5
@NiettheDarkAbsol: Mungkin lebih aman untuk tidak menggunakan tipe MIME "nyata" (atau apa pun yang mungkin menjadi satu di masa depan), kalau-kalau beberapa browser suatu hari mungkin memutuskan untuk mem-parsing dan mengeksekusi elemen skrip jenis itu dengan cara tertentu. Yang mengatakan, saya lebih suka menggunakan x-awalan standar untuk jenis kustom, yaitu membuatnya text/x-example.
Ilmari Karonen
14

Kemungkinan menggunakan case: untuk keperluan debugging.

Anda dapat menerapkan kelas di tingkat dokumen, mis. <body class="debugscript">, lalu gunakan beberapa 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 Absol
sumber
1
Mengapa tidak <html class="debugscript">?
Bergi
@Bergi Itu pilihan juga, meskipun mungkin tidak akan mengungkapkan <head>skrip karena <head>itu sendiri juga display:nonesehingga Anda harus mengungkapkannya secara paksa, yang dapat menyebabkan komplikasi lebih lanjut.
Niet the Dark Absol
10
Maksud Anda "kesenangan lebih lanjut" atau "potensi debugging lebih lanjut" :-)
Bergi
1

Tag skrip disembunyikan secara default dengan menggunakan display:none;. Unor 1 menjelaskan spesifikasi bahasa yang mendasarinya. Namun, mereka masih merupakan bagian dari DOM dan dapat ditata sesuai.

Yang mengatakan, penting untuk diingat persis apa yang dilakukan tag skrip. Meskipun dulu disertai dengan jenis dan bahasa, itu tidak lagi diperlukan. Sekarang diasumsikan bahwa JavaScript ada di sana, dan sebagai akibatnya browser akan menafsirkan dan mengeksekusi skrip saat ditemui (atau dimuat) dari tag ini.

Setelah skrip dieksekusi, konten tag hanya teks (sering disembunyikan) pada halaman. Teks ini bisa diungkapkan, tetapi juga bisa dihapus karena itu hanya teks.

Di bagian bawah halaman Anda, tepat sebelum </html>tag penutup , Anda dapat dengan mudah menghapus tag ini beserta teksnya dan tidak akan ada perubahan pada halaman.

Sebagai contoh:

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

Ini tidak akan menghapus fungsi apa pun, karena keadaan halaman telah diubah dan tercermin dalam konteks eksekusi global saat ini. Misalnya, jika halaman telah memuat pustaka seperti jQuery, menghapus tag tidak akan berarti bahwa jQuery tidak lagi terbuka karena sudah ditambahkan ke lingkungan runtime halaman. Ini pada dasarnya hanya membuat alat inspeksi DOM tidak menunjukkan elemen skrip, tetapi itu menyoroti bahwa elemen skrip yang pernah dieksekusi benar-benar hanya teks.

1. unor, Kamis 07 Jul 2016, wutzebaer, "Kapan tag harus terlihat dan mengapa mereka bisa?", 1 Jul di 10:53, https://stackoverflow.com/a/38147398/1026459

Travis J
sumber