Miałem ten problem z innerHTML, musiałem dołączyć skrypt Hotjar do tagu „head” mojej aplikacji Reactjs i musiałby on zostać wykonany zaraz po dołączeniu.
Jednym z dobrych rozwiązań dla dynamicznego importu węzła do znacznika „head” jest moduł React-helment .
Istnieje również przydatne rozwiązanie proponowanego problemu:
Brak tagów skryptowych w innerHTML!
Okazuje się, że HTML5 nie pozwala na dynamiczne dodawanie znaczników skryptu za pomocą właściwości innerHTML. Tak więc poniższe polecenia nie zostaną wykonane i nie będzie ostrzeżenia o treści Hello World!
element.innerHTML = "<script>alert('Hello World!')</script>";
Jest to udokumentowane w specyfikacji HTML5:
Uwaga: elementy skryptu wstawione przy użyciu innerHTML nie są wykonywane po ich wstawieniu.
Ale uwaga, nie oznacza to, że innerHTML jest bezpieczny przed skryptami krzyżowymi. Możliwe jest wykonanie JavaScript za pośrednictwem innerHTML bez użycia tagów, jak pokazano na stronie innerHTML MDN .
Rozwiązanie: Dynamiczne dodawanie skryptów
Aby dynamicznie dodać znacznik skryptu, musisz utworzyć nowy element skryptu i dołączyć go do elementu docelowego.
Możesz to zrobić dla zewnętrznych skryptów:
var newScript = document.createElement("script");
newScript.src = "http://www.example.com/my-script.js";
target.appendChild(newScript);
I wbudowane skrypty:
var newScript = document.createElement("script");
var inlineScript = document.createTextNode("alert('Hello World!');");
newScript.appendChild(inlineScript);
target.appendChild(newScript);