<script> etiketleri ne zaman görünür olmalı ve neden olabilir?

142

scriptBiçimlendirilmiş bir öğe display:blockgörünür görünür. Neden mümkün ve istendiği yerde gerçek kullanım durumu var mı?

td > * {
  display: block;
}

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

Snippet'i genişlet

html css script-tag

— wutzebaer
kaynak

55

<style>İçeriği düzenlenebilir görünür bir CSS gördüm . Etkileri gerçek zamanlı olarak görmek için güzel bir yol.

— John Dvorak

19

Bir sonraki mücadeleniz için, yorumları görünür hale getirmenin bir yolunu bulun.

— Bay Lister

11

Aynı şeyden bahsetmek için buraya geldim, @ JanDvorak. İlk gördüğümde minimi patlattım. Ben kodpen

— Kjeld Schmidt

6

Bana ait hatırlatıyor Şafak Yıldızının Yolculuğu Lucy Aslan görünür kılan bir büyü okur ve o sihirli etkili olacağına dikkat sürpriz ne zaman onu sen ben kendi kurallarını itaatsizlik olacağını düşündün, ve o temelde diyor?

— David Conrad

4

Buraya, bunun temel bir soru olduğunu düşündüm ve yeni bir şeyler öğrendim. Ben <3 sof.

— Jacksonkr

104

HTML5 belirtimi , kullanıcı aracılarının (tarayıcılar gibi) kullanması beklenen bir stil sayfasını tanımlar . Bölüm 10.3.1 "Gizli elemanlar" için stilleri listeler:

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

Gördüğünüz gibi, bu geçerlidir display: none;etmek script.

Bu, kullanıcılarınız ve gizli scriptöğeler arasındaki tek "engeldir" . Mükemmel bir şekilde iyi ve yazar stil sayfalarındaki (ve elbette kullanıcı stil sayfalarındaki) kullanıcı aracısı stil sayfalarından stillerin üzerine yazabilmek için tasarlanmıştır.

Neden birisi kullanmak isteyebilir? Bir kullanım örneği, eski öğeye benzer şekilde / gibi karakterlerden kaçmak zorunda kalmadan içeriği görüntülemektir<>xmp . scriptEleman komut dosyaları için değil, sadece kullanılabilir ayrıca veri blokları için (MIME türü ile herhangi bir şey için, yani).

— UNOR
kaynak

Veri zaten kodlanmış olmalıdır <script>- veri blokları tarafından yüklenemez src.

@PauliSudarshanTerho: Evet, veri bloğu olarak kullanılırsa, öğede niteliğe srcizin verilmez script.

— ya da

71

<script>Etiketler neden görünür olabilir?

Diğerleri gibi HTML öğeleri oldukları ve CSS'in kendilerine uygulanmasını önlemek için HTML belirtiminde (karmaşıklık katacak) özel durum kuralları yazmak için bir neden yoktur.

Herhangi bir öğe stilize edilebilir. Örneğin, şunları ele alalım:

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

İstendiği yerde herhangi bir Usecase var mı?

Kesinlikle hayır yaygın olanları, ancak genel kurallar için mantıklı şekilde tasarlanmamıştır her şey bu olabilir uygulayın. Bunlar ortak durumlar için tasarlanmıştır.

— Quentin
kaynak

9

Aslında, Chrome denetçisinde bir komut dosyası etiketine bakarsanız, bakınuser agent stylesheet: script {display:none}

— Niet the Dark Absol

8

Bunu "diğerleri gibi DOM öğeleri" yapardım. Aslında ayrıştırma kuralları ile oldukça özel HTML etiketleridir.

— Bergi

2

Eğlenceli gerçek: komut dosyası içeriği CDATA olarak ayrıştırıldığından , geçmişte olduğu <script type="text/plain">gibi kullanabilirsiniz <xmp>, ancak yine de W3C doğrulayıcı ile uyumlu olabilirsiniz.

— Bay Lister

2

script {display: block !important;}özel bir durum kuralı olmadığında neden çalışmıyor ?

— wutzebaer

3

@wutzebaer Benim için iyi çalışıyor. Her şeyi doğru yaptığınızdan emin misiniz? scriptEtiketin de görünür bir öğe içinde olması gerektiğini unutmayın; scriptörneğin headvarsayılan olarak değil , yalnızca gövdede görünür .

— Luaan

36

Başka (yaygın olmayan) kullanım durumu:

Bazen <script>stil kılavuzlarında kısa HTML kodu örnekleri için etiketler kullanıyorum . Bu şekilde HTML etiketlerinden ve özel karakterlerden kaçmak zorunda kalmam. Ve metin editörü etiketi otomatik tamamlama ve sözdizimi vurgulama hala çalışıyor. Ancak tarayıcıda sözdizimi vurgulama eklemenin kolay bir yolu yoktur.

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>

Snippet'i genişlet

— jfrej
kaynak

2

Geçerli bir MIME türü: text/htmlve class="codesample"stilleri uygulamak için gibi bir şey kullanmanızı öneririm, ancak kötü değil . Bilgiçlikle ilgili nedenlerden ötürü: D

— Dark Absol Niet

5

@NiettheDarkAbsol: Muhtemelen daha güvenli değil , "gerçek" bir MIME türü (veya ileride biri haline edebilecek hiçbir) kullanmak için sadece bazı tarayıcıda durumda bir gün, bir şekilde bu tür senaryo öğelerini ayrıştırmak ve yürütmek karar verebilir. Bununla birlikte, x-özel türler için standart öneki kullanmayı tercih ederim , yani yap text/x-example.

— Ilmari Karonen

14

Olası kullanım durumu: hata ayıklama amacıyla.

Bir sınıfı belge düzeyinde uygulayabilirsiniz, örn. <body class="debugscript">, sonra biraz CSS kullanın:

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

— Karanlık Mutlak
kaynak

1

Neden olmasın <html class="debugscript">?

— Bergi

@Bergi Bu da bir seçenektir, ancak muhtemelen <head>komut dosyalarını açığa çıkarmayacaktır, çünkü <head>kendisinin de display:nonebunu yapması gerekir, bu da daha fazla komplikasyona yol açabilecek zorla açığa çıkarmanız gerekir.

— Niet the Dark Absol

10

Yani "daha fazla eğlence" veya "daha fazla hata ayıklama potansiyeli" :-)

— Bergi

1

Komut dosyası etiketleri varsayılan olarak kullanılarak gizlenir display:none;. Unor ¹ temel dil özelliklerini açıklamaktadır. Ancak, bunlar hala DOM'nin bir parçasıdır ve buna göre şekillendirilebilir.

Bununla birlikte, bir komut dosyası etiketinin ne yaptığını akılda tutmak önemlidir. Eskiden türlere ve dillere eşlik ederken, artık gerekli değildir. Artık JavaScript'in orada olduğu varsayılmaktadır ve sonuç olarak tarayıcılar komut dosyasını bu etiketlerle karşılaştığında (veya yüklendiğinde) yorumlayacak ve çalıştıracaktır.

Komut dosyası yürütüldükten sonra, etiketin içeriği sayfadaki metindir (genellikle gizlidir). Bu metin açığa çıkarılabilir, ancak yalnızca metin olduğu için de kaldırılabilir .

Sayfanızın altında, kapanış </html>etiketinden hemen önce, bu etiketleri metinleriyle birlikte kolayca kaldırabilirsiniz ve sayfada hiçbir değişiklik olmazdı.

Örneğin:

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

Sayfanın durumu zaten değiştirilmiş olduğundan ve geçerli global yürütme bağlamında yansıtıldığından, bu herhangi bir işlevi kaldırmaz. Örneğin, sayfa jQuery gibi bir kitaplık yüklediyse, etiketlerin kaldırılması, sayfanın çalışma zamanı ortamına zaten eklenmiş olduğu için jQuery'nin artık gösterilmediği anlamına gelmez. Temelde yalnızca DOM denetim aracının komut dosyası öğelerini göstermemesini sağlamakla birlikte, yürütüldüğünde komut dosyası öğelerinin gerçekten yalnızca metin olduğunu vurgulamaktadır.

_{1. unor, Per 07 Tem 2016, wutzebaer, "Etiketler ne zaman görünür olmalı ve neden olabilirler?", 1 Temmuz 10:53, https://stackoverflow.com/a/38147398/1026459}

— Travis J
kaynak