使用自定义确认消息处理浏览器后退按钮

如何解决使用自定义确认消息处理浏览器后退按钮

我有一个表单，如果用户尝试返回而不保存更改（即不提交表单），我想显示一个自定义确认弹出窗口。 因此，如果用户按下浏览器的后退按钮，应弹出确认信息，而不是转到显示所有地址列表的上一页 /addresses。

<form id="address_form" class="address-form" action="/address/123">
  // form fields
</form>
<%= link_to  'Edit',edit_address_path(address) %>

$(document).on('turbolinks:load',function () {
  window.history.pushState({ prevUrl: window.location.href },null,window.location.href)
  window.onpopstate = function(event) {
    if(window.location.href.match(/.*\/addresses\/\d*\/edit\/*/)) {
        showConfirmationPopup();
    }
  }
})

这只是部分工作，从某种意义上说，当第一次按下浏览器的后退按钮时，此代码执行正常，但最后页面会重新加载并且弹出窗口被隐藏（因为它默认隐藏）。现在，如果我再次按下浏览器的后退按钮，代码将按预期工作，无需重新加载。

我还认为这也可能是由于 turbolinks。所以我在没有 turbolinks 的情况下尝试了它：

<%= link_to  'Edit',edit_address_path(address),data: {turbolinks: false} %>

$(window).on('beforeunload',function(event) {
  if (event.target.referrer.match(/.*\/addresses\/\d*\/edit\/*/)) {
    showConfirmationPopup();
  }
})

但在这种情况下，event.target.referrer 返回的是 /addresses 而不是 /addresses/edit，因此我不能将此功能限制为编辑地址页面。

任何帮助将不胜感激！