Ajouter reporter ou asynchrone attribut généré de façon dynamique des balises de script via javascript

Je suis dynamiquement mettre une balise de script pour les DOM de ma page comme ceci:

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Cela devrait générer quelque chose comme ceci:

<script src="https://www.youtube.com/iframe_api"></script>

Je veux juste le mettre dans un reporter ou asynchrone de cette balise de script comme ceci:

<script src="https://www.youtube.com/iframe_api" defer async></script>

Alors, comment dois-je faire cela à l'aide de javascript?

OriginalL'auteur rahulserver | 2016-12-22

  1. 26

    Il n'y a pas besoin d'ajouter async à votre script tag, depuis que l'attribut est activé par défaut et scripts charger de manière asynchrone, à moins dit de ne pas.

    Comme pour defer, tout comme vous changez la src attribut en JavaScript, vous pouvez également activer qu'on aime tant:

    var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.defer = true;
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    Alternativement, vous pouvez utiliser setAttribute() pour cela.

    var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
tag.setAttribute('defer','');
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
    Qui fonctionne. Merci man!! Et profiter de la upvote!!!!
    Que diriez -tag.defer = true?

    OriginalL'auteur Jon Uleis

  2. -1

    J'ai créé un démo(besoin de l'essayer avec cache du navigateur est désactivé), où je suis en train de faire différer les travaux pour dynamiquement ajoutés script.

    <!DOCTYPE html>
<html>
  <head>
    <script src="https://andreymakahov.github.io/defer/big.js" crossorigin="anonymous" defer></script>
  </head>
  <body>
    <script>
      var script = document.createElement('script');
      script.src ="https://andreymakahov.github.io/defer/small.js";
      script.defer = true;
      document.body.appendChild(script);
    </script>
  </body>
</html>

    Nous avons donc deux scripts:

    1. big.js a beaucoup de contenu avec console.log('big') à la fin. Il est à l'intérieur de la section de tête et a reporter.
    2. small.js a juste console.log('small'). Il sera fixé de manière dynamique à la section de corps à reporter

    Mon attente est à la fois scripts ne sera pas bloquant l'analyse HTML, va être chargé de manière asynchrone et seront exécutés dans l'ordre:

    1. big.js
    2. small.js

    Mais en réalité, la séquence est comme suit:

    > small
> big

    Petit script est en cours de chargement beaucoup plus rapide, parce que sa taille est beaucoup plus petite et il n'attend pas big.js pour être chargé et exécuté en premier.

    Pourriez-vous les gars expliquer un tel comportement?

    OriginalL'auteur user1740326