Tag <script> nie działa

pytanie zadane 29 września 2020 w HTML i CSS przez JakSky Stary wyjadacz (14,770 p.)
edycja 29 września 2020 przez JakSky

Przychodzę do Was z nietypowym problemem. Piszę aplikację front-end w Wasm(webassembly) i gdy dodaję dynamicznie do drzewa DOM tag <script> to skrypt, albo link do skryptu nie działa a plik nie jest pobierany.

Dodam, że plik i wszystko inne jest poprawne. Co więcej w drzewie DOM również widać dodany element. Więc dlaczego JS nie chce się wykonać?

Sam Wasm nie ma dostępu do DOM, więc w jaki sposób modyfikuje drzewo? Jedyne co mi na myśl przychodzi to JS. Ale gdy dodaję dynamicznie JS za pomocą JS to wszystko działa.

Można tego też doświadczyć dodając skrypt w narzędziach deweloperskich w przeglądarce. O nawet tu na forum: dodaję do drzewa:

<script>console.log("Hej!");</script>

I w konsoli nic się nie wyświetla pomimo, iż w drzewie wszystko jest poprawne.

Ktoś coś wie? Szukałem informacji w internecie, ale nic o tym nie ma. Jednym słowem to magia jakaś.

komentarz 29 września 2020 przez VBService Ekspert (253,340 p.)

change src of script tag dynamically

komentarz 29 września 2020 przez JakSky Stary wyjadacz (14,770 p.)

Niestety nie działa. W dodatku nie chcę zmieniać src a dodać nowy skrypt w tagach.

2 odpowiedzi

odpowiedź 29 września 2020 przez Wiciorny Ekspert (270,170 p.)

dodaję dynamicznie do drzewa DOM tag <script> to skrypt, albo link do skryptu nie działa a plik nie jest pobierany.

Nie bardzo rozumiem co masz na myśli, jeśli w momencie tworzenia DOM wołasz tag scryptowy to on się wykona, jeśli jednak jest od z zewnętrznego źródła dodawany, to taki mechanizm nie zadziała do póki dokument nie bedzie gotowy

Spróbuj u Siebie dodać

<script type="text/javascript">
   console.log("twoj log");
</script>

Przydałby się cały kod, ponieważ dla twojego przykładu sam fidle, zwraca :D to co oczekujesz

_dist-editor.js?8e14f685603c8399c8f683552c12713124d97b6f:1 Unrecognized feature: 'display-capture'.
switchGrid @ _dist-editor.js?8e14f685603c8399c8f683552c12713124d97b6f:1
?editor_console=true:57 Hej!

komentarz 29 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

jeśli w momencie tworzenia DOM wołasz tag scryptowy to on się wykona, jeśli jednak jest od z zewnętrznego źródła dodawany, to taki mechanizm nie zadziała do póki dokument nie bedzie gotowy

Mógłbyś to opisać jaśniej?

komentarz 29 września 2020 przez JakSky Stary wyjadacz (14,770 p.)
edycja 29 września 2020 przez JakSky

@Wiciorny, jeśli w momencie tworzenia DOM wołasz tag scryptowy to on się wykona,

Niestety, ale u mnie nie działa. Chyba, że tworzenie a modyfikacja to pojęcia różne(choć myślę, że w przypadku renderowania drzewa takie same)

Aplikacja którą nad którą pracuję działa na Blazorze. Więc jak macie Visual Studio to możecie na szybko utworzyć domyślny projekt Blazor WebAssembly a następnie dodać taki do do komponentu:

@((MarkupString)myMarkup)

@code {
    string myMarkup = @"<script>console.log(""Hej!"");</script>";

Oczywiście wszystko w przeglądarce będzie poprawnie wyrenderowane, a pomimo to JS się nie wykona. Dlaczego?

odpowiedź 29 września 2020 przez VBService Ekspert (253,340 p.)
edycja 29 września 2020 przez VBService

index.html

<!DOCTYPE html>
<html lang="pl">
  <head>
    <meta charset="utf-8">
  </head>
  <body>
  <button id="load-js">Load JS</button>

  <script>
    const button = document.getElementById("load-js");
    const dynamic_script = document.getElementById("dynamic-js-file");

    button.addEventListener("click", () => {
      console.log("Ładuję - dynamic_script_file.js");
      const script_tag = document.createElement("script");
      
      script_tag.type = "text/javascript";
      script_tag.src = "dynamic_script_file.js";
      script_tag.innerHTML = null;
      script_tag.id = "dynamic-js-file-2";
      document.body.appendChild(script_tag);
    })
  </script>
  </body>
</html>

dynamic_script_file.js

console.info("Załadowany - dynamic_script_file.js");
const msg = document.createElement("pre");
msg.textContent = "Załadowany - dynamic_script_file.js";
document.body.appendChild(msg);

1	komentarz 29 września 2020 przez JakSky Stary wyjadacz (14,770 p.) Napisałem, że dynamiczne ładowanie JS za pomocą innego kodu JS działa poprawnie:) Obecnie to moje jedyne rozwiązanie, które działa.

komentarz 29 września 2020 przez VBService Ekspert (253,340 p.)
edycja 29 września 2020 przez VBService

Chyba, już łapie o co pytasz, ale zostawmy ten przykład może się komuś przyda.

Może ten link będzie pomocny: Is there a way to use DOM elements in Blazor lub Invoke JavaScript Functions - Blazor

komentarz 29 września 2020 przez JakSky Stary wyjadacz (14,770 p.)

Chyba rozwiązałem zagadkę. Blazor ładuje elementy za pomocą insertAdjacentHTML- bo niby jak inaczej wkleić fragment HTML za pomocą JS? A sam insertAdjacentHTML blokuje wykonywanie skryptów JS i tym samym nie można dodać tagów <script>.

Znalazłem to tu:

stackoverflow.com

Więc takie stwierdzenie:

Note that you can use MarkupString to inject a <script> tag into a dynamic Blazor page, something that normally won't be allowed by Blazor.

Nie jest prawdą.

komentarz 29 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

bo niby jak inaczej wkleić fragment HTML za pomocą JS?

Możesz stworzyć obiekt DOM dla skryptu i umieścić go w dokumencie przez appendChild/insertBefore/insertAdjacentElement.

komentarz 29 września 2020 przez JakSky Stary wyjadacz (14,770 p.)

Właśnie insertAdjacentElement blokuje wykonywanie JS chroniąc przed atakami XSS. :)

komentarz 29 września 2020 przez ScriptyChris Mędrzec (190,190 p.)

Jesteś pewien co do insertAdjacentElement? Bo to inna metoda niż insertAdjacentHTML. Jedna dodaje element DOM, a druga kod HTML (w formie tekstu).