Quando dovrebbero essere visibili i tag <script> e perché possono?

142

Un scriptelemento che è stato disegnato come display:blockappare visibile. Perché è possibile e c'è qualche caso d'uso reale dove è desiderato?

td > * {
  display: block;
}

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

Espandi frammento

html css script-tag

— wutzebaer
fonte

55

Ho visto un CSS visibile <style>con contenuto modificabile. Bel modo di vedere gli effetti in tempo reale.

— John Dvorak,

19

Per la tua prossima sfida, escogita un modo per rendere visibili i commenti.

— Lister,

11

Sono venuto qui per menzionare la stessa cosa, @JanDvorak. Mi è saltato in aria la prima volta che l'ho visto. Ne ho una dimostrazione su Codepen

— Kjeld Schmidt,

6

Mi ricorda Il viaggio del veliero quando Lucy legge un incantesimo che rende visibile Aslan, e lei è sorpresa che la magia potrebbe influenzare lui , e dice in sostanza, hai pensato avrei disobbedire mie regole?

— David Conrad,

4

Sono venuto qui pensando che questa fosse una domanda di base e ho lasciato aver imparato qualcosa di nuovo. I <3 sof.

— Jacksonkr,

104

La specifica HTML5 definisce un foglio di stile che gli user agent (come i browser) dovrebbero usare. La Sezione 10.3.1 elenca gli stili per "Elementi nascosti":

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

Come puoi vedere, si applica display: none;a script.

Questa è l'unica "barriera" tra i tuoi utenti e gli scriptelementi nascosti . Va benissimo e intende essere in grado di sovrascrivere gli stili dai fogli di stile user-agent all'interno dei fogli di stile dell'autore (e ovviamente anche all'interno dei fogli di stile dell'utente).

Perché qualcuno potrebbe voler usarlo? Un caso d'uso è la visualizzazione di contenuti senza dover sfuggire a caratteri come </> , simili al vecchio xmpelemento. L' scriptelemento può essere utilizzato non solo per gli script, ma anche per i blocchi di dati (ovvero, per qualsiasi cosa con un tipo MIME).

— unor
fonte

I dati devono essere già codificati nei <script>- i blocchi di dati non possono essere caricati da src.

@PauliSudarshanTerho: Sì, se utilizzato come blocco dati, l' srcattributo non è consentito scriptsull'elemento.

— unor

71

Perché i <script>tag possono essere visibili?

Perché sono elementi HTML come gli altri e non c'è motivo di scrivere regole di casi speciali nella specifica HTML (che aggiungerebbe complessità) per impedire ai CSS di applicarli.

Qualsiasi elemento può essere disegnato. Prendi ad esempio:

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

Esiste un Usecase dove è desiderato?

Certamente nessuno di quelli comuni, ma le regole generali non sono progettate per dare un senso a tutto ciò a cui puoi applicarle. Sono progettati per i casi comuni.

— Quentin
fonte

9

In effetti, se guardi un tag script nella finestra di ispezione di Chrome, vediuser agent stylesheet: script {display:none}

— Niet the Dark Absol,

8

Lo farei "Elementi DOM come tutti gli altri". In realtà sono tag HTML piuttosto speciali con le loro regole di analisi.

— Bergi,

2

Curiosità: dal momento che i contenuti degli script sono analizzati come CDATA, è possibile utilizzarli <script type="text/plain">come <xmp>in passato, ma essere comunque compatibili con il validatore W3C.

— Mr Lister,

2

perché script {display: block !important;}non funziona quando non esiste una regola di caso speciale?

— wutzebaer,

3

@wutzebaer Funziona bene per me. Sei sicuro di fare tutto bene? Nota che anche il scripttag deve trovarsi in un elemento visibile: ti mostrerà solo scripti body, non ad esempio headper impostazione predefinita.

— Luaan,

36

Un altro caso d'uso (non comune):

A volte uso i <script>tag per brevi esempi di codice HTML nelle guide di stile. In questo modo non devo sfuggire ai tag HTML e ai caratteri speciali. E i tag dell'editor di testo con completamento automatico e l'evidenziazione della sintassi funzionano ancora. Ma non esiste un modo semplice per aggiungere l'evidenziazione della sintassi nel 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>

Espandi frammento

— jfrej
fonte

2

Non male, anche se suggerirei di utilizzare un tipo MIME valido: text/htmle di usare qualcosa di simile class="codesample"per applicare gli stili. Solo per motivi pedanti: D

— Niet the Dark Absol,

5

@NiettheDarkAbsol: Probabilmente è più sicuro non usare un tipo MIME "reale" (o qualcosa che potrebbe diventare uno in futuro), nel caso in cui qualche browser un giorno decidesse di analizzare ed eseguire elementi di script di quel tipo in qualche modo. Detto questo, preferirei utilizzare il x-prefisso standard per i tipi personalizzati, ovvero crearlo text/x-example.

— Ilmari Karonen,

14

Possibile caso d'uso: per scopi di debug.

È possibile applicare una classe a livello di documento, ad es. <body class="debugscript">, quindi usa alcuni 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
fonte

1

Perché no <html class="debugscript">?

— Bergi,

@Bergi Anche questa è un'opzione, anche se probabilmente non rivelerà gli <head>script perché lo <head>stesso ha anche, display:nonequindi dovresti rivelarlo forzatamente, il che potrebbe portare a ulteriori complicazioni.

— Niet the Dark Absol,

10

Intendi "ulteriore divertimento" o "ulteriore potenziale di debug" :-)

— Bergi,

1

I tag di script sono nascosti per impostazione predefinita utilizzando display:none;. Unor ¹ spiega le specifiche della lingua sottostante. Tuttavia, fanno ancora parte del DOM e possono essere adattati di conseguenza.

Detto questo, è importante tenere presente esattamente cosa sta facendo un tag di script. Mentre era accompagnato da tipi e lingue, non è più necessario. Si suppone ora che JavaScript sia presente e, di conseguenza, i browser interpreteranno ed eseguiranno lo script man mano che viene rilevato (o caricato) da questi tag.

Una volta eseguito lo script, il contenuto del tag è solo testo (spesso nascosto) sulla pagina. Questo testo può essere rivelato, ma può anche essere rimosso perché è solo testo.

Nella parte inferiore della pagina, proprio prima della chiusura </html> tag di , potresti facilmente rimuovere questi tag insieme al loro testo e non ci sarebbero modifiche alla pagina.

Per esempio:

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

Ciò non rimuoverà alcuna funzionalità, poiché lo stato della pagina è già stato modificato e si riflette nel contesto di esecuzione globale corrente. Ad esempio, se la pagina aveva caricato una libreria come jQuery, la rimozione dei tag non significa che jQuery non sia più esposto perché è già stato aggiunto all'ambiente di runtime della pagina. Fondamentalmente sta solo facendo in modo che lo strumento di ispezione DOM non mostri elementi di script, ma evidenzia che gli elementi di script una volta eseguiti sono davvero solo testo.

_{1. unor, gio 07 lug 2016, wutzebaer, "Quando dovrebbero essere visibili i tag e perché possono?", 1 luglio alle 10:53, https://stackoverflow.com/a/38147398/1026459}

— Travis J
fonte