javascriptiframebrowser-historyalpine.js

How to prevent history.pushState from iFrame src change

For an existing <iframe> the src attribute gets changed with AlpineJS. How can I make the browser ignore this src change for the browser history?

My current (basic) iframe code:

<iframe :src="iframeSrc"></iframe>
Solution

  • The answer lies in using a setTimeout() (even without an interval) before setting the new value, so the iframe gets destroyed and recreated instead of reused, which seems to prevent the history entry.

    So this might look like this:

    this.iframeSrc = ''; setTimeout(() => this.iframeSrc = '/new-source');

    There are other ways which have been discussed on github/alpinejs