0

I am trying to show a custom popup when I refresh a specific page in Chrome (or any browser). Since we can't change the default message like Reload site? Changes you made may not be saved, I need to totally replace the popup.

enter image description here

...
mounted() {
  window.addEventListener('beforeunload', this.beforeUnload)
},
methods: {
  async beforeUnload(event) {
    // this.showReloadPopup = true // This doesn't work for the first time. It only works after the default popup
    event.preventDefault()
    event.returnValue = ''
  },
},
...

As you can see the above code, this.showReloadPopup = true doesn't work. It only works after the default popup.

  beforeRouteLeave(to, from, next) {
    this.nextRoute = next
    next(false)
    this.showReloadPopup = true
  },

And the beforeRouteLeave works only when the page is navigated.

Is there a similar hook like beforeRouteReload or else?

Otherwise, is there any way to know if the reload button is clicked from the default popup?

hotcakedev
  • 2,194
  • 1
  • 25
  • 47

1 Answers1

1

It's not possible, and that's a very purposeful restriction placed on all websites by browser vendors. The reason it does not exist is it would be extremely easy for any website to prevent a user from leaving their site, which would be open to being used maliciously.

adsy
  • 8,531
  • 2
  • 20
  • 31
  • Even no way to detect the clicking reload button from the default popup? – hotcakedev May 12 '23 at 20:18
  • If you want to detect a refresh, there's ways of doing that. But you cant use it to block the user from actually reloading. For example, `onbeforeunload` event fires. However, anything you do there is pointless as the refresh is already in flight and unstoppable. If you wanted to detect if they refreshed *after* the refresh completed, that is possible...but I don't think you want that? – adsy May 12 '23 at 20:20
  • Yes, how can I detect it after the refresh is completed? I might show a popup that shows something caused by your action blah blah. – hotcakedev May 13 '23 at 02:01
  • See https://stackoverflow.com/questions/5004978/check-if-page-gets-reloaded-or-refreshed-in-javascript. Lots of answers there but (surprisingly) this lower voted one is what made the most sense to me https://stackoverflow.com/a/74057499/1086398. – adsy May 14 '23 at 04:30
  • Fairly error prone though. To be honest, the consequences of refreshing and losing stuff is usually on the user -- but its also expected by the user. You shouldn't feel too worried about the reality of refreshing. I've sometimes had this request from single customers/users who may not have realised, but their anecdotal 1-man evidence isn't really conclusive there's a major problem at all. If it really is a problem, I'd look into saving the form data or whatever it is you are worried about losing into localstorage so its not lost on refresh. – adsy May 14 '23 at 04:32