Ho avuto questo problema con innerHTML, ho dovuto aggiungere uno script Hotjar al tag "head" della mia applicazione Reactjs e avrebbe dovuto essere eseguito subito dopo l'aggiunta.
Una delle buone soluzioni per l'importazione dinamica dei nodi nel tag "head" è il modulo React-helment .
Inoltre, esiste una soluzione utile per il problema proposto:
Nessun tag di script in innerHTML!
Si scopre che HTML5 non consente l'aggiunta dinamica di tag di script tramite la proprietà innerHTML. Quindi il seguente non verrà eseguito e non ci sarà alcun avviso che dice Hello World!
element.innerHTML = "<script>alert('Hello World!')</script>";
Questo è documentato nelle specifiche HTML5:
Nota: gli elementi di script inseriti tramite innerHTML non vengono eseguiti quando vengono inseriti.
Ma attenzione, questo non significa che innerHTML sia al sicuro dagli script tra siti. È possibile eseguire JavaScript tramite innerHTML senza utilizzare i tag, come illustrato nella pagina innerHTML di MDN .
Soluzione: aggiunta dinamica di script
Per aggiungere dinamicamente un tag di script, è necessario creare un nuovo elemento di script e aggiungerlo all'elemento target.
Puoi farlo per gli script esterni:
var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);
E script in linea:
var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript);
target.appendChild(newScript);