webentwicklung-frage-antwort-db.com.de

Wann sollten <script> -Tags sichtbar sein und warum können sie?

Ein script -Element, das als display:block erscheint sichtbar. Warum ist es möglich und gibt es einen realen Anwendungsfall, in dem es gewünscht wird?

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

Die HTML5-Spezifikation definiert ein Stylesheet , die Benutzeragenten (wie Browser) verwenden sollen. Abschnitt 10.3.1 listet die Stile für "Versteckte Elemente" auf:

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

Wie Sie sehen können, gilt display: none; bis script.

Dies ist die einzige "Barriere" zwischen Ihren Benutzern und versteckten script Elementen. Es ist vollkommen in Ordnung und soll in der Lage sein, Stile von zu überschreiben User-Agent-Stylesheets innerhalb von Autoren-Stylesheets (und natürlich auch innerhalb von User-Stylesheets).

Warum könnte jemand es benutzen wollen? Ein Anwendungsfall ist Anzeigen von Inhalten, ohne dass Zeichen wie </> , ähnlich dem alten xmp -Element. Das script -Element kann nicht nur für Skripte verwendet werden, sondern auch für auch für Datenblöcke (d. H. Für alles mit einem MIME-Typ).

103
unor

Warum können <script> Tags sichtbar sein?

Da es sich um HTML-Elemente wie jedes andere handelt und es keinen Grund gibt, Sonderfallregeln in die HTML-Spezifikation zu schreiben (die die Komplexität erhöhen würden), um zu verhindern, dass CSS auf sie angewendet wird.

Jedes Element kann gestylt werden. Nehmen Sie zum Beispiel:

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

Gibt es einen Usecase, in dem es gesucht wird?

Gewiss keine gemeinsamen, aber allgemeine Regeln sind nicht dazu gedacht, Sinn für alles zu machen, auf das Sie können sie anwenden. Sie sind für die häufigsten Fälle ausgelegt.

71
Quentin

Ein weiterer (nicht häufiger) Anwendungsfall:

Ich benutze manchmal <script> -Tags für kurze HTML-Codebeispiele in Stilrichtlinien. Auf diese Weise muss ich mich nicht vor HTML-Tags und Sonderzeichen schützen. Die automatische Vervollständigung von Texteditor-Tags und die Hervorhebung der Syntax funktionieren weiterhin. Es gibt jedoch keine einfache Möglichkeit, Syntaxhervorhebungen im Browser hinzuzufügen.

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>
36
jfrej

Möglicher Anwendungsfall: zu Debugging-Zwecken.

Sie können eine Klasse auf Dokumentebene anwenden, z. <body class="debugscript">, dann benutze etwas 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);
}
14

Skript-Tags werden standardmäßig mit display:none; Ausgeblendet. Unor1 erklärt die zugrunde liegende Sprachspezifikation. Sie sind jedoch immer noch Teil des DOM und können entsprechend gestaltet werden.

Dabei ist es wichtig, genau zu wissen, was ein Script-Tag tut. Während es früher von Typen und Sprachen begleitet wurde, ist dies nicht mehr erforderlich. Es wird jetzt davon ausgegangen, dass JavaScript vorhanden ist, und als Ergebnis interpretieren und führen Browser das Skript so aus, wie es von diesen Tags erkannt (oder geladen) wird.

Sobald das Skript ausgeführt wurde, ist der Inhalt des Tags nur Text (häufig ausgeblendet) auf der Seite. Dieser Text kann aufgedeckt werden, aber it kann auch entfernt werden weil es nur Text ist.

Am Ende Ihrer Seite, kurz vor dem schließenden </html> - Tag, können Sie diese Tags zusammen mit ihrem Text ganz einfach entfernen, und die Seite wird nicht geändert.

Beispielsweise:

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

Dadurch werden keine Funktionen entfernt, da der Status der Seite bereits geändert wurde und sich im aktuellen globalen Ausführungskontext widerspiegelt. Wenn die Seite beispielsweise eine Bibliothek wie jQuery geladen hat, bedeutet das Entfernen der Tags nicht, dass jQuery nicht mehr verfügbar ist, da es bereits zur Laufzeitumgebung der Seite hinzugefügt wurde. Das DOM-Inspektionstool zeigt im Wesentlichen nur keine Skriptelemente an, es hebt jedoch hervor, dass die einmal ausgeführten Skriptelemente tatsächlich nur Text sind.

1. unor, Do 07. Juli 2016, wutzebaer, "Wann sollten Tags sichtbar sein und warum können sie?", 1. Juli um 10:53, https://stackoverflow.com/a/38147398/1026459 =

1
Travis J