Dynamically injected script execution not working on page navigation using <svelte:head>

[ghost]

In my test application using Sveltekit, I tried to inject third party scripts to page using

<svelte:head> 
    {@html
        `<script>${scriptsData}</script>`     
    }  
</svelte:head>

The above code works fine on direct hit of the page but not during manual navigation to the page. The same thing work if I use

<svelte:head> 
   <script>console.log("Some script executed")</script>`     
</svelte:head>

The above script will work even on page navigation but the script code is not dynamic

But I wish to add scripts dynamically per page. I read somewhere that browser for safety reasons will not execute scripts added dynamically. It accepts only sanitised one's.Is there any easy workaround

Stackoverflow link - https://stackoverflow.com/questions/78112514/dynamically-injected-script-execution-not-working-on-page-navigation-using-svel

[kyllerss]

Unless I am misunderstanding what you are saying, sounds like you have an SPA. The reason it triggers on the first page but not subsequent pages is likely because the initial page is a full render of HTML in which the browser will evaluate header-defined scripts, while subsequent pages are being performed by Svelte's updates to the DOM - these won't trigger the header (as far as I am aware).

If you want to trigger some Javascript on each page, you can look into the onMount event handler or afterNavigate.

[ghost]

The thing is that my application needs to execute scripts on page navigation apart from direct hit. The script data is coming through an API and it contains information on which scripts needs to get executed on which page. Since those data is in a variable, I tried to use @html inside svelte:head but these scripts only get executed on page direct hit and not during navigation to same page. For eg: I need to get a script executed when page is /about. With code @html this scripts gets executed on direct hit to page /about but not during manual navigation when clicking on about page link from say home page.However script written like <script>console.log("Some script executed")</script> inside svelte:head will get executed on page navigation.I am afraid you are wrong in assuming code written inside svelte:head will not work on navigation to the page (without page refresh).I need a way to write code in such a way that dynamic script gets executed on page navigation also.The problem with <script>console.log("Some script executed")</script> the code is not dynamic

[kyllerss]

Did you check out afterNavigate? Does that help?