Heim > Artikel > Web-Frontend > Welche Rolle spielen Skript-Tags in HTML? Wozu dient das Typattribut im Skript-Tag?
Welche Rolle spielen Skript-Tags in HTML? Wozu dient das Typattribut im Skript-Tag?
- 寻∝梦Original
- 2018-08-16 18:02:5012822Durchsuche
Welche Rolle spielen Skript-Tags in HTML? Wozu dient das Typattribut im Skript-Tag? In diesem Artikel werden hauptsächlich die relevanten Kenntnisse und Funktionen des HTML-Skript-Tags und die Verwendung des Typattributs im Skript-Tag erläutert
Verwandte Kenntnisse und Funktionen des HTML-Skript-Tags:
Wie viel wissen Sie über Skript, ein häufig verwendetes Tag? Mit der Verbesserung dieses Skript-Tags wurden einige HTML5-Dinge hinzugefügt, wie z. B. async und defer, Crossorigin, for / event usw.
Wie Sie wahrscheinlich wissen, wird das Skript-Tag verwendet, um anzugeben, welches JavaScript auf einer Webseite ausgeführt werden soll. Skript-Tags können JavaScript-Code direkt enthalten oder auf eine externe JavaScript-URL verweisen.
Skript-Tags werden in der Reihenfolge ausgeführt, in der sie erscheinen:
<script> var x = 3; </script> <script> alert(x); // Will alert '3'; </script>
Die Ladereihenfolge ist bei Verwendung externer Link-Ressourcen nicht so intuitiv, aber sie ist dennoch wahr.
<script src="//typekit.com/fj5j4j3.js"></script> <!-- 在Type套件已执行或超时之前，此第二脚本不会执行。 --> <script src="//my.site/script.js"></script>
Diese Regel gilt auch, wenn Sie externe Links und Inline-JavaScript kombinieren.
Das bedeutet, dass Ihre Seite deutlich langsamer geladen wird, wenn Ihre Website über langsame Skripte verfügt, die früher auf der Seite geladen werden. Dies bedeutet auch, dass später geladene Skripte von früher geladenen Skripten abhängen können.
Ein Seitenelement wird erst gerendert, wenn alle Skripte davor geladen wurden. Das bedeutet, dass Sie alle möglichen verrückten Dinge auf Ihren Webseiten tun können, bevor sie geladen werden, solange Sie sich nicht um die dadurch verursachten Leistungsprobleme kümmern.
Diese Regel gilt jedoch nicht für das Hinzufügen von Skript-Tags zum DOM über Methoden wie document.appendChild, nachdem die Webseite geladen wurde. Diese Tags führen die Skripte der Reihe nach entsprechend dem Abschluss der Browser-Anforderungsverarbeitung aus und die Ladereihenfolge ist nicht mehr garantiert.
Wenn ein Skript-Tag ausgeführt wird, sind die HTML-Elemente davor zugänglich (die darauffolgenden sind jedoch noch nicht verfügbar)
<html>
<head>
<script>
// document.head is available
// document.body is not!
</script>
</head>
<body>
<script>
// document.head is available
// document.body is available
</script>
</body>
</html>Sie können sich vorstellen, wie der HTML-Parser Tag für Tag auf das Dokument zugreift. Wenn das Skript-Tag analysiert wird, wird das darin enthaltene JavaScript sofort ausgeführt. Dies bedeutet, dass im aktuellen JavaScript nur auf DOM-Knoten zugegriffen werden kann, deren Start-Tag vor dem aktuellen Skript erscheint (über querySelectorALl, jQuery usw.).
Eine nützliche Konsequenz ist, dass document.head fast immer in jedem auf einer Webseite geschriebenen JavaScript verfügbar ist. document.body ist nur verfügbar, wenn Sie das script-Tag innerhalb oder nach dem 6c04bd5ca3fcae76e30b72ad730ca86d-Tag schreiben.
HTML5 fügt zwei Tools zur Steuerung der Skriptausführung hinzu.
async bedeutet „nicht sofort ausführen“. Genauer gesagt heißt es: Es macht mir nichts aus, wenn Sie dieses Skript ausführen, nachdem die gesamte Seite geladen wurde, und es nach anderen Skripten einfügen. Dies ist für statistische Analyseskripte sehr nützlich, da kein anderer Code auf der Seite von der Ausführung des Statistikskripts abhängig sein muss. Das Definieren von Variablen oder Funktionen, die eine Seite benötigt, ist im asynchronen Code nicht möglich, da Sie nicht wissen können, wann der asynchrone Code tatsächlich ausgeführt wird.
defer bedeutet „vor der Ausführung warten, bis die Seite analysiert wurde“. Dies entspricht in etwa der Bindung Ihres Skripts an das DOMContentedLoaded-Ereignis oder der Verwendung von jQuery.ready. Wenn dieser Code ausgeführt wird, sind alle Elemente im DOM verfügbar. Im Gegensatz zu Async werden alle Verzögerungsskripte in der Reihenfolge ausgeführt, in der sie auf der HTML-Seite erscheinen. Sie werden lediglich verschoben, bis die HTML-Seite analysiert ist.
Verwendung des Typattributs im Skript-Tag in HTML:
Historisch (seit der Geburt von Netsacpe 2), ob type= in den Skript-Tag-Text geschrieben werden soll /javascript hat damit nichts zu tun. Wenn Sie über Typ einen Nicht-JavaScript-MIME-Typ festlegen, wird dieser vom Browser nicht ausgeführt. Das ist cool, wenn Sie Ihre eigene Sprache definieren möchten:
<script type="text/emerald">
make a social network
but for cats
</script>Das tatsächliche Ausführungsergebnis dieses Codes liegt bei Ihnen, wie zum Beispiel:
<script>
var codez = document.querySelectorAll('script[type="text/emerald"]');
for (var i=0; i < codez.length; i++)
runEmeraldCode(codez[i].innerHTML);
</script>Das Definieren der runEmeraldCode-Funktion bleibt Ihnen überlassen als üben.
Wenn Sie besondere Anforderungen haben, können Sie auch den Standardtyp des Skript-Tags auf der Seite überschreiben, indem Sie ein Meta-Tag übergeben:
<meta http-equiv="Content-Script-Type" content="text/vbscript">
oder eine Anfrage, die einen Content-Script-Type-Header zurückgibt .
Sie können Crossorigin verwenden
Obwohl es nicht vollständig standardisiert ist, unterstützen einige Browser das Crossorigin-Attribut. Die Grundidee besteht darin, dass der Browser die Verwendung nicht originaler Ressourcen einschränkt (homologe Ressourcen haben dasselbe Protokoll, denselben Hostnamen und denselben Port, zum Beispiel: „http://google.com:80“).
Damit soll verhindert werden, dass Sie beispielsweise eine Aufforderung an die Website Ihres Konkurrenten richten, Ihr Benutzerkonto auf dieser Website abzumelden (nicht gut!). Obwohl es etwas unerwartet ist, dass dieses Problem das Skript-Tag betrifft, müssen Sie bei Implementierung von Crossorigin nur einen Handler zum window.onerror-Ereignis hinzufügen, und auf der Konsole werden einige Warnmeldungen angezeigt, die Sie auffordern, etwas einzuführen sollten nicht eingeführt werden. Unter sicheren Browsern funktioniert das Laden externer Skripte fehlerfrei, sofern Sie nicht das Crossorigin-Attribut angeben.
Crossorgin ist kein magischer Sicherheitstrick. Es bewirkt lediglich, dass der Browser normale CORS-Zugriffsprüfungen aktiviert, eine OPTIONS-Anfrage stellt und den Access-Control-Header überprüft.
html-Skript-Tag und innerHTML:
通过 DOM 动态添加到页面上的 script 标签会被浏览器执行：
var myScript = document.createElement('script');
myScript.textContent = 'alert("?")';
document.head.appendChild(myScript);通过 innerHTML 动态添加到页面上的 script 标签则不会被执行：
document.head.innerHTML += '<script>alert("?")</script>';为什么会是这样的原因不是很确定，但是它解决了一个小问题：“是否有一个办法让一个 script 标签在 Chrome 代码检查器中显示但不实际执行？”
【相关推荐】
Das obige ist der detaillierte Inhalt vonWelche Rolle spielen Skript-Tags in HTML? Wozu dient das Typattribut im Skript-Tag?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!