Search code examples
iframesveltesvelte-3sveltekit

Svelte/SvelteKit - Update iframed component when props change


In my sveltekit app, i have an embedded application via iframes, and when the user goes to the url it essentially loads that relative url within the iframe (for the embedded app)

I've got a [...slug].svelte file to handle this and the load function to set the iframe url, I'm finding that this works perfectly when it's SSR, however on the client side after a couple of page changes the iframe src doesn't get updated, I can see in the client side console log Loading: XXXX where XXX is the correct path but then the component doesn't update

REPL: https://svelte.dev/repl/3f1b36d444c6444ab7ad743248643c4e?version=3.42.4


Solution

  • This looks to be caused by this

    https://github.com/sveltejs/kit/issues/1449 https://github.com/sveltejs/kit/issues/1497

    The workaround is detailed on the tickets, essentially you return props from load and declare as a reactive statement