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

什么是 onbeforeunload 事件?

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

如何获得目标 URL?

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

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

解决方案

  1. 发送 AJAX 请求

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

--------------------------------------- --------------- -
  --- --- - --- -----------------
  ---------------- ---------------- -------
  ------------------------------------ -------------------------------------
  --------------- - -----------------------------------
---
  1. 使用 localStorage

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

--------------------------------------- --------------- -
  --------------------------------- ---------------
---

-- --------- ------------ ----- ---
--- --------- - ----------------------------------
  1. 使用 cookies

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

--------------------------------------- --------------- -
  --------------- - ------------ - ----------------------------------
---

-- --------- ------ ----- ---
--- --------- - ---------------------------------------------------------------------------------------------- -------

注意事项

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

结论

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

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/26195


猜你喜欢

  • 获取元素的jQuery选择器

    jQuery是一款流行的JavaScript库,它简化了前端开发中许多常见任务。其中之一就是从DOM中选择和操作元素。在本文中,我们将讨论如何使用jQuery选择器来获取DOM元素。

    7 年前
  • JS的Base64编码得到的图像的宽度和高度

    介绍 在前端开发中,经常会使用Base64编码来将图片转换为字符串形式进行传输,这种方式比传统的链接方式更加方便和快速。然而,当我们需要获取Base64编码得到的图像的宽度和高度时,却不是那么容易。

    7 年前
  • 为什么在JavaScript中更改数组会影响数组的副本?

    在 JavaScript 中,当我们创建一个数组并将其复制到另一个变量时,更改原始数组也会影响副本。这是因为 JavaScript 中的数组存储方式与其他编程语言不同。

    7 年前
  • JSON.stringify 深入解析

    JSON.stringify() 是 JavaScript 中一个用于将 JavaScript 对象转换为 JSON 字符串的方法。然而当对象嵌套层数较深时,使用 JSON.stringify() 可...

    7 年前
  • 如何使用JavaScript打开文件/浏览对话框?

    在前端开发中,我们经常需要使用JavaScript来处理文件相关操作。其中一个常见的需求是打开文件或浏览对话框,让用户选择要操作的文件。本文将介绍如何使用JavaScript实现这个功能。

    7 年前
  • 如何使跨域Ajax调用到谷歌地图API?

    在前端开发中,使用Ajax进行跨域调用是一件很常见的事情。但是,在某些情况下,我们需要调用第三方API来实现特定的功能,而这些API可能会存在跨域问题。本文将介绍如何在前端页面中跨域调用谷歌地图API...

    7 年前
  • jQuery移动上的滚动事件

    在移动设备上,用户通常使用手指来滚动内容。因此,在前端开发中,了解如何处理移动设备上的滚动事件是非常重要的。本文将介绍如何使用jQuery处理移动设备上的滚动事件,并提供示例代码和指导意义。

    7 年前
  • 价值的“本”在使用addEventListener的处理程序

    在前端开发中,事件处理是非常重要的一部分。而在 JavaScript 中,addEventListener 是最常用的事件监听方法之一。本文将详细介绍 addEventListener 方法的使用和实...

    7 年前
  • 利用 Function.prototype.bind 的参数数组?

    Function.prototype.bind() 是 JavaScript 中一个非常有用的函数,它可以创建并返回一个新的函数,同时将指定的对象绑定为新函数中的 this 值。

    7 年前
  • 如何强制IE重新加载JavaScript?

    在前端开发过程中,我们常常需要使用 JavaScript 来实现复杂的交互效果和功能。然而,在开发和测试过程中,我们可能会遇到缓存导致 JavaScript 代码无法更新的情况,这时就需要强制浏览器重...

    7 年前
  • 通过动态JavaScript值使用的URL.action()

    在前端开发中,我们经常需要将用户输入或其他动态值传递给后端处理,一个常见的方法是使用表单提交。但是,在某些情况下,我们可能需要在不刷新页面的情况下发送数据到后端,这时候可以使用 JavaScript ...

    7 年前
  • 获取裁剪的div的全部高度

    在前端开发中,我们经常需要计算页面元素的高度。但是,如果一个元素被裁剪了,我们可能无法直接获取它的完整高度。本文将介绍如何获取裁剪的div的全部高度。 裁剪的div 所谓裁剪,指的是当一个元素的内容超...

    7 年前
  • 如何创建一个自定义阅读Three.js的网站?

    简介 Three.js是一个流行的JavaScript 3D引擎,它提供了各种功能和工具来创建具有交互性和动画效果的实时3D场景。本文将介绍如何使用Three.js创建一个自定义阅读网站,其中可以呈现...

    7 年前
  • 反应JS忽略标签的属性

    React是一种用于构建用户界面的JavaScript库。在使用React时,您可能会遇到一个问题,即React在处理组件时忽略了某些标签的属性。这种行为与HTML和浏览器的行为不同,可能会导致意外结...

    7 年前
  • 使用 Socket.IO 实现实时通信

    在前端开发中,实现实时通信是一项重要的任务。其中,Socket.IO 是一个广泛使用的库,它可以帮助我们轻松地实现实时通信功能。 什么是 Socket.IO? Socket.IO 是一个基于 Node...

    7 年前
  • 从URL获取远程图像的宽度高度

    在前端开发中,有时需要从远程URL获取图片的宽度和高度等信息,以便进行布局等操作。本文将介绍如何使用JavaScript获取远程图像的宽度和高度。 获取方式 使用Image对象 在JavaScri...

    7 年前
  • jQuery的iframe()事件

    在前端开发中,我们经常会使用iframe来嵌入其他网页或者加载外部资源。而jQuery中提供了iframe()事件可以帮助我们更好地操作和控制这些iframe元素。

    7 年前
  • 如何用 jQuery 将 HTML 加载到变量中

    在前端开发中,我们经常需要将 HTML 代码加载到变量中进行操作。jQuery 是一个流行的 JavaScript 库,可以简化许多前端任务,包括将 HTML 加载到变量中。

    7 年前
  • 获取:用JSON错误对象拒绝承诺

    在前端开发中,经常会使用 Promise 来处理异步操作。当 Promise 被拒绝时,我们通常会返回一个错误对象来指示问题所在。然而,错误对象可能缺乏必要的信息,导致难以调试问题。

    7 年前
  • 创造不规则形状的图案及其点击事件

    在前端开发中,我们通常使用较为规则的形状来进行页面布局和设计。但是,有时候需要展示一些不规则的图案,比如说复杂的地理地形、抽象艺术作品等等。本文将介绍如何使用CSS和JavaScript创造不规则形状...

    7 年前

相关推荐

    暂无文章