首页 > 其他分享 >在页面离开前提醒你的 beforeunload 事件

在页面离开前提醒你的 beforeunload 事件

时间:2024-07-29 09:17:49浏览次数:14  
标签:提醒 对话框 window 事件 document beforeunload 页面

beforeunload 事件在当页面卸载(关闭)或刷新时调用,事件触发的时候弹出一个有确定和取消的对话框,确定则离开页面,取消则继续待在本页。handler可以设一个返回值作为该对话框的显示文本。

以下操作会触发 beforeunload 事件:

   ·关闭浏览器窗口 
  ·通过地址栏或收藏夹前往其他页面的时候 
  ·点击返回,前进,刷新,主页其中一个的时候 
  ·点击 一个前往其他页面的url连接的时候 
  ·调用以下任意一个事件的时候:click,document write,document open,document close,window close ,window navigate ,window NavigateAndFind , location replace , location reload , form submit. 
  ·当用window open打开一个页面,并把本页的window的名字传给要打开的页面的时候。 
  ·重新赋予location.href的值的时候。 
  ·通过input type=”submit”按钮提交一个具有指定action的表单的时候。 

例如:

window.addEventListener('beforeunload', function(event) {
      document.getElementById('keyword').value = '';
});

在这个例子中,我们为 window 对象添加了一个 beforeunload 事件监听器。当用户尝试离开页面时,会触发这个事件,并可以通过设置 event.returnValue 来显示一个确认对话框,让用户选择是否真的要离开页面。document.getElementById 用于获取页面上具有指定 id 的元素。

 

标签:提醒,对话框,window,事件,document,beforeunload,页面
From: https://www.cnblogs.com/joe235/p/18329355

相关文章

  • 维基百科页面的 bs4 方法:获取信息框
    我目前正在尝试将bs4方法应用于维基百科页面:结果不会存储在df中,因为维基百科上的抓取是一种非常非常常见的技术-我们可以使用适当的方法来处理许多不同的工作-我在获取结果方面确实遇到了一些问题-并将其存储到df中-作为一个非常常见的Wikipedia-bs4工作的......
  • 七天.NET 8操作SQLite入门到实战 - 第七天Blazor学生管理页面编写和接口对接(3)
    前言本章节我们的主要内容是完善Blazor学生管理页面的编写和接口对接。七天.NET8操作SQLite入门到实战详细教程第一天SQLite简介第二天在Windows上配置SQLite环境第三天SQLite快速入门第四天EasySQLite前后端项目框架搭建第五天引入SQLite-netORM并封装......
  • 从输入 URL 到页面展示到底发生了什么?
    在浏览器输入网址后,浏览器会先解析URL,解析出域名、资源路径、端口等信息,准备发送HTTP请求,检查浏览器缓存是否有缓存该资源,如果有就直接返回;没有的话就进入下一步网路请求;接着进行DNS域名解析,来获取请求域名的IP地址,如果请求协议是HTTPS,那么还会需要建立TLS连接,DNS......
  • 【微信小程序开发】API使用、自定义组件、页面实现图解超详细
    文章目录常用API消息交互消息加载转发给朋友模态对话框获取用户信息调起客户端扫码界面发起支付获取位置自定义组件创建自定义组件使用自定义组件组件生命周期组件所在页面的生命周期页面实现淘宝订单简化页面饮品订单简化页面本篇总结更多相关内容可查看常用......
  • 你的眼睛背叛了你的心,看到高颜值页面,你也心动呀。
    大家都喜欢高颜值的网页,主要是因为视觉上的吸引力和舒适感。1.吸引注意力:高颜值的网页设计通常会吸引用户的注意力,使用户更愿意停留在网页上并探索其中的内容。2.提升用户体验:精美的网页设计可以提升用户的整体体验,让用户感到愉悦和舒适,从而增加用户对网站的好感度......
  • 【HTML+CSS】HTML锚点:创建页面内导航的简易指南
    目录一、什么是HTML锚点?二、如何创建HTML锚点?1.定义锚点目标2.创建指向锚点的链接三、进阶使用1.平滑滚动2.动态锚点四、锚点工具总结五、锚点的应用场景1. 长页面导航2. 表单导航3. 图像画廊4. FAQ页面六、锚点的SEO考虑七、锚点的兼容性八、实践建议......
  • 后端说,单页面SPA和前端路由是怎么回事
    没有请求的路由在传统开发中,浏览器点击一个超链接,就会像后端web服务器发送一个html文档请求,然后页面刷新。但开始单页面开发后,就完全不同了。单页面?这个概念难以理解。我用一个js作为整个web应用,然后再这个js中操作dom变化,以此来实现页面变化。这不叫单页面吗?这叫!但不完善,因为这......
  • [二、状态管理]3管理应用拥有的状态(2)LocalStorage:页面级UI状态存储
    LocalStorage是页面级的UI状态存储,通过@Entry装饰器接收的参数可以在页面内共享同一个LocalStorage实例。LocalStorage也可以在UIAbility实例内,在页面间共享状态。本文仅介绍LocalStorage使用场景和相关的装饰器:@LocalStorageProp和@LocalStorageLink。说明本模块从APIver......
  • 如何解决“必须首先将控件添加到页面”的问题。机队错误?
    我正在尝试使用flet制作janggi(国际象棋变体)游戏。由于我必须在多个地方使用该板,因此我创建了一个名为janggiBoard的类,它继承自ft.Stack。我想对片段使用拖放操作,因此我按照flet文档中的Solitaire教程进行操作。当我尝试执行“move_on_top”部分时出现问题。在Solitaire......
  • 试图找出此页面的逻辑:存储了大约 ++ 100 个结果 - 并使用 Python 和 BS4 进行了解析
    试图找出此页面背后的逻辑:我们已将一些结果存储在以下数据库中:https://www.raiffeisen.ch/rch/de/ueber-uns/raiffeisen-gruppe/Organization/raiffeisenbanken/deutsche-schweiz.html#accordionitem_18104049731620873397从a到z大约:120个结果或更多:......