search

officert / vue-friendly-iframe

A Vue js component for creating super fast loading, non-blocking iframes.
https://officert.github.io/vue-friendly-iframe/
307 stars 57 forks source link

Weird behaviour with Firefox's back-button #20

Open mtlehtin opened 4 years ago

mtlehtin commented 4 years ago

When clicking the back-button in Firefox, the browser will replace the url and content of the iframe with the parent's url and content. Issue can be easily reproduced in vue-friendly-iframe's documentation and demo -site.

Issue exists at least with Firefox 68.3.0, 70, 72.0.1.

Steps to reproduce:

Screenshot:

Screenshot 2020-01-13 at 8 28 53

Discussion elsewhere:

https://stackoverflow.com/questions/5259154/firefox-back-button-vs-iframes https://stackoverflow.com/questions/2245883/browser-back-acts-on-nested-iframe-before-the-page-itself-is-there-a-way-to-av

mtlehtin commented 4 years ago

The issue seems to be related with historyApi. When the iframe's URL is applied by window.location.href it changes the history stack and causes the issue. When the URL is applied by window.location.replace without affecting the history the back-button works as intended.

This change seems the fix this issue. I'm not sure if there are any harmful side-effects with that solution.

https://github.com/officert/vue-friendly-iframe/blob/master/src/components/FriendlyIframe/index.vue#L69

<body onload="window.location.replace('${this.src}'); parent.postMessage('${this.iframeLoadedMessage}', '*')"></body>
buksy90 commented 4 years ago

I experience same issue and created PR based on the suggested solution https://github.com/officert/vue-friendly-iframe/pull/23