Quel est le rôle de la balise de script en HTML ? Quelle est l'utilisation de l'attribut type dans la balise de script ?-tutoriel HTML-php.cn

Quel est le rôle de la balise de script en HTML ? Quelle est l'utilisation de l'attribut type dans la balise de script ?

寻∝梦

Libérer： 2018-08-16 18:02:50

original

12869 Les gens l'ont consulté

Quel est le rôle de la balise de script en HTML ? Quelle est l’utilisation de l’attribut type dans la balise de script ? Cet article explique principalement les connaissances et fonctions pertinentes de la balise HTML Script et l'utilisation de l'attribut type dans la balise script

Connaissances et fonctions associées de la balise HTML Script :

Que savez-vous du script, une balise fréquemment utilisée ? Avec l'amélioration de cette balise de script, certaines choses HTML5 ont été ajoutées, comme async et defer, crossorigin, for / event, etc.

Comme vous le savez probablement, la balise script est utilisée pour spécifier quel JavaScript exécuter sur une page Web. Les balises de script peuvent contenir du code JavaScript directement ou pointer vers une URL externe JavaScript.

Les balises de script sont exécutées dans l'ordre dans lequel elles apparaissent. Le code suivant illustre cela de manière intuitive :

<script>
  var x = 3;
</script>
<script>
  alert(x);
  // Will alert &#39;3&#39;;
</script>

Copier après la connexion

L'ordre de chargement n'est pas si intuitif lors de l'utilisation de ressources de liens externes, mais c'est toujours le cas. même Établi :

<script src="//typekit.com/fj5j4j3.js"></script>
<!-- 在Type套件已执行或超时之前，此第二脚本不会执行。 -->
<script src="//my.site/script.js"></script>

Copier après la connexion

Cette règle s'applique également si vous mélangez des liens externes et du JavaScript en ligne.

Cela signifie que si votre site contient des scripts lents qui se chargent plus tôt dans la page, le chargement de votre page sera nettement plus lent. Cela signifie également que les scripts chargés ultérieurement peuvent dépendre des scripts chargés plus tôt.

Un élément de page ne sera rendu que lorsque tous les scripts qui le précèdent auront été chargés. Cela signifie que vous pouvez faire toutes sortes de choses folles sur vos pages Web avant qu'elles ne se chargent, tant que vous ne vous souciez pas des problèmes de performances que cela provoque.

Cependant, cette règle ne s'applique pas à l'ajout de balises de script au DOM via des méthodes telles que document.appendChild après le chargement de la page Web. Ces balises exécuteront les scripts dans l'ordre dans lequel le traitement des requêtes du navigateur est terminé, et l'ordre de chargement n'est plus garanti.

Lorsqu'une balise de script est exécutée, les éléments HTML qui la précèdent sont accessibles (mais ceux qui la suivent ne sont pas encore disponibles)

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

Copier après la connexion

Vous pouvez imaginer l'analyseur HTML balise par balise Accéder au document directement, et lorsqu'il analyse la balise de script, exécutez immédiatement le JavaScript qu'il contient. Cela signifie que seuls les nœuds DOM dont la balise de début apparaît avant le script actuel sont accessibles dans le JavaScript actuel (via querySelectorALl, jQuery, etc.).

Un corollaire utile est que document.head est presque toujours disponible dans n'importe quel JavaScript écrit sur une page Web. document.body n'est disponible que si vous écrivez la balise de script à l'intérieur ou après la balise

HTML5 ajoute deux outils pour contrôler l'exécution des scripts.

async signifie "ne l'exécutez pas tout de suite". Plus précisément, il dit : Cela ne me dérange pas si vous exécutez ce script après le chargement de la page entière, en le plaçant après d'autres scripts. Ceci est très utile pour les scripts d'analyse statistique car aucun autre code sur la page ne doit dépendre de l'exécution du script de statistiques. Définir des variables ou des fonctions dont une page a besoin n'est pas possible dans le code asynchrone car vous n'avez aucun moyen de savoir quand le code asynchrone sera réellement exécuté.

defer signifie "attendre que la page soit analysée avant de l'exécuter". Cela équivaut à peu près à lier votre script à l'événement DOMContentedLoaded ou à utiliser jQuery.ready. Lorsque ce code est exécuté, tous les éléments du DOM sont disponibles. Contrairement à async, tous les scripts différés seront exécutés dans l'ordre dans lequel ils apparaissent dans la page HTML, ils sont simplement reportés jusqu'à ce que la page HTML soit analysée.

Utilisation de l'attribut type dans la balise script en HTML :

Historiquement (depuis la naissance de Netsacpe 2), s'il faut écrire type= sur le texte de la balise script /javascript n'a rien à voir avec ça. Si vous définissez un type MIME non JavaScript via type, le navigateur ne l'exécutera pas. C'est cool quand vous voulez définir votre propre langage :

<script type="text/emerald">
  make a social network
    but for cats
</script>

Copier après la connexion

Le résultat réel de l'exécution de ce code dépend de vous, comme :

<script>
  var codez = document.querySelectorAll(&#39;script[type="text/emerald"]&#39;);
  for (var i=0; i < codez.length; i++)
    runEmeraldCode(codez[i].innerHTML);
</script>

Copier après la connexion

Définir la fonction runEmeraldCode I je vais laisser cela comme un exercice pour vous.

Si vous avez des besoins particuliers, vous pouvez également remplacer le type par défaut de la balise script sur la page en passant une balise méta :

<meta http-equiv="Content-Script-Type" content="text/vbscript">

Copier après la connexion

ou une requête renvoyant un Content-Script - Tapez l’en-tête.

Vous pouvez utiliser crossorigin

Bien qu'il ne soit pas entièrement standardisé, certains navigateurs prennent en charge l'attribut crossorigin. L'idée de base est que le navigateur restreindra l'utilisation de ressources non originales (les ressources homologues sont le même protocole, nom d'hôte et port, par exemple : `http://google.com:80).

C'est pour vous éviter, par exemple, de faire une demande au site de votre concurrent pour vous déconnecter de votre compte utilisateur sur ce site (pas bien !). Bien qu'il soit un peu inattendu que ce problème implique la balise de script, si crossorigin est implémenté, il vous suffit d'ajouter un gestionnaire à l'événement window.onerror, et vous verrez des messages d'avertissement sur la console, vous invitant à introduire quelque chose qui ne doivent pas être introduits dans des scripts externes. Sous les navigateurs sécurisés, le chargement de scripts externes fonctionnera sans erreur, sauf si vous spécifiez l'attribut crossorigin.

crossorgin n'est pas un tour de sécurité magique, tout ce qu'il fait est de permettre au navigateur d'activer les contrôles d'accès CORS normaux, de faire une requête OPTIONS et de vérifier l'en-tête Access-Control.

balise de script HTML et innerHTML :

通过 DOM 动态添加到页面上的 script 标签会被浏览器执行：

var myScript = document.createElement(&#39;script&#39;);
myScript.textContent = &#39;alert("?")&#39;;
document.head.appendChild(myScript);

Copier après la connexion

通过 innerHTML 动态添加到页面上的 script 标签则不会被执行：

document.head.innerHTML += &#39;<script>alert("?")</script>&#39;;

Copier après la connexion

为什么会是这样的原因不是很确定，但是它解决了一个小问题：“是否有一个办法让一个 script 标签在 Chrome 代码检查器中显示但不实际执行？”

【相关推荐】

HTML5中web是什么？web存储中的元素有哪些？

HTML table属性你知道多少，进来了解一下？

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!