如何获取 onbeforeunload 事件的目标 URL？

什么是 onbeforeunload 事件？

onbeforeunload 是一个 Window 对象上的事件，在用户关闭窗口或导航离开当前页面之前触发。通常用于提示用户保存未保存的更改，避免误操作。

如何获得目标 URL？

在 onbeforeunload 事件中，无法直接获取页面将要跳转到的 URL。由于安全原因，浏览器并不允许通过事件对象来获取。

但是，可以通过一些技巧来解决这个问题。

解决方案

1. 发送 AJAX 请求

当用户触发 onbeforeunload 事件时，可以发送一个 AJAX 请求，将目标 URL 发送到后端进行记录。后续可以从后端查询目标 URL。

window.addEventListener('beforeunload', function(event) {
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/url-recorder', false);
  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xhr.send('url=' + encodeURIComponent(location.href));
});

1. 使用 localStorage

在页面跳转之前，将目标 URL 存储在 localStorage 中。在下一个页面加载时，从 localStorage 中读取目标 URL。

window.addEventListener('beforeunload', function(event) {
  localStorage.setItem('targetUrl', location.href);
});

// 在下一个页面中，从 localStorage 中读取目标 URL
var targetUrl = localStorage.getItem('targetUrl');

1. 使用 cookies

与方案二类似，使用 cookies 存储目标 URL。在下一个页面加载时，从 cookies 中读取目标 URL。

window.addEventListener('beforeunload', function(event) {
  document.cookie = 'targetUrl=' + encodeURIComponent(location.href);
});

// 在下一个页面中，从 cookie 中读取目标 URL
var targetUrl = decodeURIComponent(document.cookie.replace(/(?:(?:^|.*;\s*)targetUrl\s*\=\s*([^;]*).*$)|^.*$/, "$1"));

注意事项

需要注意的是，在 onbeforeunload 事件处理程序中发送 AJAX 请求可能会导致请求失败，因为浏览器可能已经停止了所有网络活动。此外，使用 localStorage 和 cookies 存储数据时，需要考虑存储容量和安全性等问题。

结论

获取 onbeforeunload 事件的目标 URL 可以通过发送 AJAX 请求、使用 localStorage 或 cookies 等技巧来解决。但需要注意安全和容量等问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26195