La pregunta es cómo reescribir una incrustación de script HTML estático:
<script async id="__script__id__" type="text/javascript" src="//abc.xyz.com/js/script.js"> </script>en una incrustación programática que permite cargar el script solo en una condición determinada.
La recompensa se establece para una descripción de cómo la incrustación estática/programática difiere entre sí, específicamente:
src y las carga previamente) con referencias autorizadas.Si ya descubrió cómo detectar sus criterios, la carga de otro script es así:
<head> <!-- the usual head stuff goes here --> <script> // replace `criteria` with your actual criteria if(criteria) { const script = document.createElement('script'); script.id = '__script__id__'; script.type = 'text/javascript'; script.async = true; script.src = '//abc.xyz.com/js/script.js'; document.head.append(script); } </script> <!-- remaining scripts go here --> <!-- injected script will end up here --> </head>Verifique los criterios, cree el elemento, establezca sus propiedades, agréguelo al documento.
Traté de encontrar detalles sobre este mecanismo. Lo mejor que pude encontrar fue de MDN sobre el tema de las propiedades async y defer del elemento del script:
Los detalles de procesamiento exactos para estos atributos son complejos, involucran muchos aspectos diferentes de HTML y, por lo tanto, están dispersos a lo largo de la especificación. Estos algoritmos describen las ideas centrales, pero se basan en las reglas de análisis para las etiquetas de inicio y fin de
<script>en HTML, en contenido externo y en XML ; las reglas para el métododocument.write(); el manejo de secuencias de comandos ; y así.
Desafortunadamente, no tengo la familiaridad necesaria con las diversas especificaciones HTML de W3 para convertirlo en inglés simple y parece que tomará bastante tiempo familiarizarse con eso.