- 当前位置：首页 >IT科技类资讯 >如何让用户选择是否离开当前页面？
如何让用户选择是否离开当前页面？
发布时间：2025-11-05 05:36:38 来源：创站工坊 作者：系统运维
为什么要让用户选择是何让否离开页面
如果用户填写了很多数据此时 不小心点了其他a标签或者关闭了浏览器，不做判断，用户那么用户数据直接丢了梳理需求
离开页面方式，选择被location.href,否离a标签,关闭浏览器或者当前tab页等... 需要判断数据是否跟初始化时一致（用户有无填写表单...） 用户选择离开就要继续逻辑，反之则不离开正式开始
首先要知道一个事件:onbeforeunload,开当MDN的说明是：当浏览器窗口关闭或者刷新时，会触发beforeunload事件。前页当前页面不会直接关闭，何让可以点击确定按钮关闭或刷新，用户也可以取消关闭或刷新。选择 HTML规范指出在此事件中调用window.alert()，否离window.confirm()以及window.prompt()方法，开当可能会失效实践一下
在微信公众号编辑器界面，前页输入一部分内容后，何让点击关闭tab页，用户此时出现弹窗
回到项目中，加入beforeunload事件
HTML文件中加入script标签 <script type="text/javascript"> window.onbeforeunload = function () { return "Leave this page?"; } </script> 点击关闭，或者此时输入window.location.href= "xxx.ooo.com"会出现
通过a标签跳转(+前端路由)
我使用的是dva/router,引入相关组件 import { Prompt } from dva/router; .... render(){ return <Prompt message={this.handlePrompt} /> } 引入Prompt组件,并且传入message是一个方法，看看这个方法 public handlePrompt = (location: Location) => { return false; }; 那么此时我们使用dva/router的history.push方法去跳转前端路由，就不能跳了，因为handlePrompt一直返回false,除非返回ture,否则这个页面通过a标签就无法跳转了...
问题来了，怎么判断是否需要跳转呢？
参考微信公众号编辑器，如果你编辑了内容后（跟初始进入的数据不一致），而且你是通过页面内a标签跳转的，那么就出现弹窗确认）
❝ 注意: isEqual这个方法支持比较 arrays, array buffers, booleans, date objects, error objects, maps, numbers, Object objects, regexes, sets, strings, symbols, 以及 typed arrays. Object 对象值比较自身的属性，服务器租用不包括继承的和可枚举的属性。不支持函数和DOM节点比较。 ❞
实现思路讲解
组件初始化时候，深拷贝一份表单数据存入组件中 当用户通过a标签离开页面时，触发handlePrompt方法，存储离开的目的url,此时使用isEqual比较当前的数据和组件初始化的表单数据是否一致，如果不一致则出现弹窗,让用户选择是否离开 代码实现: // 处理自定义离开弹窗 handlePrompt =(location )=>{ // 如果当前的保存为false，则弹窗提醒用户进行保存操作 if (!this.isSave) { this.showModalSave(location); return false; } return true; } // 展示离开的提示的弹窗 showModalSave = location => { this.setState({ modalVisible: true, location, }); } // 点击确认，进行页面保存操作，和保存成功后路由的跳转 handleSaveAuto = () => { const { location } = this.state; const { history } = this.props; this.isSave = true; this.setState({ modalVisible: false, }); //进行保存操作的处理，这里可以换成自己点击确认后需要做的操作 this.handleSavePaper(save,exit,location.pathname) } 离开逻辑 // 取消是的路由跳转 gotoNewUrl(url){ const {dispatch,history } = this.props dispatch(routerRedux.push({ pathname:url, })); } // 点击取消关闭弹窗 closeModalSave=()=>{ const { location } = this.state; const {dispatch,history } = this.props this.isSave = true; this.setState({ modalVisible: false, },()=>{ this.gotoNewUrl(location.pathname) }); } html结构 <Prompt message={this.handlePrompt}/> <Modal title="温馨提示" visible={this.state.modalVisible} closable={false} centered onCancel={this.closeModalSave} footer={null} > <p>即将离开当前页面，是否保存当前修改？</p> <div style={{textAlign:right}}> <Button type=primary onClick={this.handleSaveAuto}>保存</Button> <Button style={{marginLeft:20px}} onClick={this.closeModalSave}>取消</Button> </div> </Modal> 云南idc服务商企商汇益华科技源码库源码下载IT技术网IT资讯网亿华云香港云服务器服务器租用亿华科技全栈开发益强科技多维IT资讯亿华云益强资讯优选亿华互联益强编程堂技术快报益强IT技术网益华科技码上建站亿华灵动极客编程益强数据堂益强编程舍益华科技云智核益华IT技术论坛码力社益强智囊团创站工坊益强前沿资讯汇智坊编程之道IT资讯网思维库益强科技云站无忧亿华智造亿华智慧云亿华云计算科技前瞻
- Copyright © 2025 Powered by 如何让用户选择是否离开当前页面？,创站工坊 滇ICP备2023006006号-44sitemap