Attributen
Dit element bevat de globale attributen.
|
Voor klassieke scripts geldt: als het Voor modulescripts geldt: als het Let op
Dit attribuut mag niet gebruikt worden als het Dit attribuut maakt het mogelijk om parser-blokkerende JavaScript te elimineren, waarbij de browser scripts zou moeten laden en evalueren voordat het verdergaat met parsen. Als het attribuut samen met het Dit is een booleaans attribuut: de aanwezigheid van een booleaans attribuut op een element representeert de waarde true, en de afwezigheid van het attribuut representeert de waarde false. Zie Browsercompatibiliteit voor opmerkingen over browserondersteuning. Zie ook Async scripts for asm.js. | |
|
Geeft aan dat u wilt dat de browser een Opmerking
Als alternatief kunnen op JavaScript gebaseerde attributiebronnen of -triggers geregistreerd worden door een Er zijn twee versies van dit attribuut die u kunt instellen:
Zie de Attribution Reporting API voor meer informatie. |
|
Dit attribuut geeft expliciet aan dat bepaalde bewerkingen geblokkeerd moeten worden totdat het script uitgevoerd is. De bewerkingen die geblokkeerd moeten worden, moeten een door spaties gescheiden lijst met blokkerende tokens zijn. Momenteel is er slechts één token:
Opmerking
Alleen | |
Normale script-elementen geven minimale informatie door aan window.onerror voor scripts die niet slagen voor de standaard CORS-controles. Om foutlogging mogelijk te maken voor sites die een apart domein voor statische media gebruiken, gebruikt u dit attribuut. Zie CORS settings attributes voor een uitgebreidere uitleg van de geldige argumenten ervan. | |
|
Dit booleaanse attribuut wordt ingesteld om aan een browser aan te geven dat het script bedoeld is om uitgevoerd te worden nadat het document geparset is, maar voordat het Scripts met het Let op
Dit attribuut mag niet gebruikt worden als het Het Scripts met het Dit attribuut maakt het mogelijk om parser-blokkerende JavaScript te elimineren, waarbij de browser scripts zou moeten laden en evalueren voordat het verdergaat met parsen. Als het attribuut samen met het | |
Geeft een hint over de relatieve prioriteit die gebruikt moet worden bij het ophalen van een extern script. Toegestane waarden:
| |
Dit attribuut bevat een of meer hashes van het script. Het wordt gebruikt om te garanderen dat de inhoud van het script overeenkomt met wat de ontwikkelaar verwacht, en niet vervangen is door een kwaadaardig script bij een supplychainaanval. Het attribuut mag niet opgegeven worden wanneer het src-attribuut ontbreekt. Zie ook Subresource Integrity. | |
| Dit booleaanse attribuut wordt ingesteld om aan te geven dat het script niet uitgevoerd moet worden in browsers die ES-modules ondersteunen — hiermee kan dit gebruikt worden om fallback-scripts aan te bieden voor oudere browsers die geen modulaire JavaScript-code ondersteunen. | |
| Een cryptografische nonce (een getal dat maar één keer gebruikt wordt) om scripts toe te staan in een script-src Content-Security-Policy. De server moet elke keer dat hij een policy verzendt een unieke nonce-waarde genereren. Het is cruciaal om een nonce te leveren die niet te raden is, aangezien het omzeilen van het beleid van een bron anders triviaal is. | |
|
Geeft aan welke referrer verzonden moet worden bij het ophalen van het script, of van bronnen die door het script opgehaald worden:
Opmerking
Een lege stringwaarde ( | |
| Dit attribuut geeft de URI van een extern script op; dit kan gebruikt worden als alternatief voor het rechtstreeks insluiten van een script in een document. | |
Dit attribuut geeft het type van het gerepresenteerde script aan.
De waarde van dit attribuut is een van de volgende:
|
Verouderde attributen
charset Verouderd | Indien aanwezig, moet de waarde een ASCII-hoofdletterongevoelige overeenkomst zijn met utf-8. Het is niet nodig om het charset-attribuut op te geven, omdat documenten UTF-8 moeten gebruiken en het script-element zijn tekencodering overneemt van het document. |
|---|---|
language Verouderd Niet-standaard | Net als het type-attribuut identificeert dit attribuut de gebruikte scripttaal. In tegenstelling tot het type-attribuut zijn de mogelijke waarden van dit attribuut echter nooit gestandaardiseerd. Het type-attribuut zou in plaats daarvan gebruikt moeten worden. |
Opmerkingen
Scripts zonder de attributen async, defer of type="module", evenals inline scripts zonder het type="module"-attribuut, worden onmiddellijk opgehaald en uitgevoerd voordat de browser doorgaat met het parsen van de pagina.
Het script moet aangeboden worden met het text/javascript-MIME-type, maar browsers zijn coulant en blokkeren scripts alleen als ze aangeboden worden met een afbeeldingstype (image/*), een videotype (video/*), een audiotype (audio/*), of text/csv.
Als het script geblokkeerd wordt, wordt er een error-event naar het element gestuurd; anders wordt er een load-event gestuurd.
Voorbeelden
Basisgebruik
Dit voorbeeld laat zien hoe u (een extern) script importeert met behulp van het <script>-element:
<script src="javascript.js"></script>Het volgende voorbeeld laat zien hoe u (een inline) script binnen het <script>-element plaatst:
<script>
alert("Hello World!");
</script>async en defer
Scripts die geladen worden met het async-attribuut worden gedownload zonder de pagina te blokkeren terwijl het script opgehaald wordt.
Zodra de download voltooid is, wordt het script echter uitgevoerd, wat het renderen van de pagina blokkeert. Dit betekent dat de rest van de inhoud op de webpagina niet verwerkt en aan de gebruiker getoond kan worden totdat het script klaar is met uitvoeren.
U krijgt geen garantie dat scripts in een specifieke volgorde uitgevoerd worden.
Het is het beste om async te gebruiken wanneer de scripts op de pagina onafhankelijk van elkaar draaien en niet afhankelijk zijn van een ander script op de pagina.
Scripts die geladen worden met het defer-attribuut worden geladen in de volgorde waarin ze op de pagina voorkomen.
Ze worden pas uitgevoerd nadat de volledige paginainhoud geladen is, wat nuttig is als uw scripts afhankelijk zijn van het feit dat de DOM al aanwezig is (bijvoorbeeld als ze een of meer elementen op de pagina wijzigen).
Hier is een visuele weergave van de verschillende methoden voor het laden van scripts en wat dat betekent voor uw pagina:
Deze afbeelding is afkomstig uit de HTML-specificatie, gekopieerd en bijgesneden tot een verkleinde versie, onder de licentievoorwaarden van CC BY 4.0.
Stel bijvoorbeeld dat u de volgende script-elementen heeft:
<script async src="js/vendor/jquery.js"></script>
<script async src="js/script2.js"></script>
<script async src="js/script3.js"></script>U kunt niet vertrouwen op de volgorde waarin de scripts geladen worden.
jquery.js kan voor of na script2.js en script3.js laden, en als dat het geval is, geeft elke functie in die scripts die van jquery afhankelijk is een fout, omdat jquery op het moment dat het script draait nog niet gedefinieerd is.
async moet gebruikt worden wanneer u een reeks achtergrondscripts heeft om te laden en u ze gewoon zo snel mogelijk gereed wilt hebben.
Misschien heeft u bijvoorbeeld een aantal speldatabestanden om te laden, die nodig zijn zodra het spel daadwerkelijk begint, maar voorlopig wilt u gewoon doorgaan met het tonen van de spelintro, titels en lobby, zonder dat deze geblokkeerd worden door het laden van scripts.
Scripts die geladen worden met het defer-attribuut (zie hieronder) worden uitgevoerd in de volgorde waarin ze op de pagina voorkomen, zodra het script en de inhoud gedownload zijn:
<script defer src="js/vendor/jquery.js"></script>
<script defer src="js/script2.js"></script>
<script defer src="js/script3.js"></script>In het tweede voorbeeld kunnen we er zeker van zijn dat jquery.js laadt voordat script2.js en script3.js laden, en dat script2.js laadt voordat script3.js laadt.
Ze worden pas uitgevoerd nadat de volledige paginainhoud geladen is, wat nuttig is als uw scripts afhankelijk zijn van het feit dat de DOM al aanwezig is (bijvoorbeeld als ze een of meer elementen op de pagina wijzigen).
Samengevat:
asyncendefergeven beide de browser de instructie om de script(s) in een aparte thread te downloaden terwijl de rest van de pagina (de DOM, enzovoort) gedownload wordt, zodat het laden van de pagina niet geblokkeerd wordt tijdens het ophaalproces.- Scripts met een
async-attribuut worden uitgevoerd zodra de download voltooid is. Dit blokkeert de pagina en garandeert geen specifieke uitvoeringsvolgorde. - Scripts met een
defer-attribuut worden geladen in de volgorde waarin ze voorkomen en pas uitgevoerd zodra alles klaar is met laden. - Als uw scripts onmiddellijk uitgevoerd moeten worden en geen afhankelijkheden hebben, gebruikt u
async. - Als uw scripts moeten wachten op het parsen en afhankelijk zijn van andere scripts en/of van het aanwezig zijn van de DOM, laadt u ze met
deferen plaatst u de bijbehorende<script>-elementen in de volgorde waarin u wilt dat de browser ze uitvoert.
Modulefallback
Browsers die de waarde module voor het type-attribuut ondersteunen, negeren elk script met een nomodule-attribuut. Hierdoor kunt u modulescripts gebruiken terwijl u met nomodule gemarkeerde fallback-scripts aanbiedt voor niet-ondersteunende browsers.
<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>Modules importeren met importmap
Wanneer u modules importeert in scripts en u de type=importmap-functionaliteit niet gebruikt, moet elke module geïmporteerd worden met een modulespecificatie die ofwel een absolute ofwel een relatieve URL is.
In het onderstaande voorbeeld is de eerste modulespecificatie een absolute URL, terwijl de tweede ("./shapes/square.js") opgelost wordt ten opzichte van de basis-URL van het document.
import { name as circleName } from "https://example.com/shapes/circle.js";
import { name as squareName, draw } from "./shapes/square.js";Een import map stelt u in staat om een mapping op te geven die, indien overeenkomend, de tekst in de modulespecificatie kan vervangen.
De onderstaande import map definieert de sleutels circle en square, die gebruikt kunnen worden als aliassen voor de hierboven getoonde modulespecificaties.
<script type="importmap">
{
"imports": {
"circle": "https://example.com/shapes/circle.js",
"square": "./shapes/square.js"
}
}
</script>Hierdoor kunnen we modules importeren met behulp van namen in de modulespecificatie (in plaats van absolute of relatieve URL's).
import { name as circleName } from "circle";
import { name as squareName, draw } from "square";Voor meer voorbeelden van wat u kunt doen met import maps, zie de sectie Modules importeren met import maps in de gids voor JavaScript-modules.
Gegevens insluiten in HTML
U kunt het <script>-element ook gebruiken om gegevens in HTML in te sluiten bij server-side rendering, door een geldig niet-JavaScript-MIME-type op te geven in het type-attribuut.
<!-- Generated by the server -->
<script id="data" type="application/json">
{
"userId": 1234,
"userName": "Maria Cruz",
"memberSince": "2000-01-01T00:00:00.000Z"
}
</script>
<!-- Static -->
<script>
const userInfo = JSON.parse(document.getElementById("data").text);
console.log("User information: %o", userInfo);
</script>Renderen blokkeren totdat een script opgehaald en uitgevoerd is
U kunt het render-token opnemen in een blocking-attribuut;
het renderen van de pagina wordt dan geblokkeerd totdat het script opgehaald en uitgevoerd is. In het onderstaande voorbeeld blokkeren we het renderen bij een async-script,
zodat het script het parsen niet blokkeert, maar wel gegarandeerd geëvalueerd wordt voordat het renderen begint.
<script blocking="render" async src="async-script.js"></script>Technische samenvatting
| Content categories | Metadata content, Flow content, Phrasing content. |
|---|---|
| Toegestane inhoud | Dynamisch script zoals text/javascript. |
| Weglaten van tag | Geen, zowel de begin- als eindtag zijn verplicht. |
| Toegestane ouders | Elk element dat metadata content accepteert, of elk element dat phrasing content accepteert. |
| Impliciete ARIA-rol | Geen bijbehorende rol |
| Toegestane ARIA-rollen | Geen role toegestaan |
| DOM-interface | HTMLScriptElement |