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

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

/addresses

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

这只是部分工作，在某种意义上说，当浏览器的后退按钮第一次按下时，此代码执行良好，但在最后页面被重新加载，弹出窗口被隐藏（默认情况下是隐藏的）。现在，如果我再次按下浏览器的“后退”按钮，代码将按预期工作，不会重新加载

我还认为这也可能是由于涡轮链接。所以我在没有TurboLink的情况下尝试过：

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

但是在这种情况下，

event.target.referer

返回的是

/addresses

，而不是

/addresses/edit

，因此我不能将此功能限制在编辑地址页面

任何帮助都将不胜感激

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

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