首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我不小心关闭浏览器时,`onbeforeunload`函数检测不到;当我使用ajax时

,如何处理跨域问题?

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

javascript如何监听页面刷新和页面关闭事件

在我们的日常生活中,时常遇到这么一种情况,当我们在点击一个链接、关闭页面、表单提交等情况,会提示我们是否确认该操作等信息。...这里就给大家讲讲javascript的onbeforeunload()和onunload()两个事件。 相同点: 两者都是在对页面的关闭或刷新事件作个操作。...浏览器的兼容 onunload: IE6,IE7,IE8 中 刷新页面、关闭浏览器之后、页面跳转之后都会执行; IE9 刷新页面 会执行,页面跳转、关闭浏览器不能执行; firefox(包括firefox3.6...) 关闭标签之后、页面跳转之后、刷新页面之后能执行,但关闭浏览器不能执行; Safari 刷新页面、页面跳转之后会执行,但关闭浏览器不能执行; Opera、Chrome 任何情况都不执行。...onbeforeunload: IE、Chrome、Safari 完美支持 Firefox 不支持文字提醒信息 Opera 不支持 IE6,IE7会出现bug ? 示例代码: ? ? ? ? ?

12.5K30
  • onbeforeunload事件被a链接触发的问题

    :BX2047: 各浏览器onbeforeunload 事件的支持与触发条件实现有差异 根据 MSDN 中描述,IE 的 onbeforeunload 事件可由以下这些条件触发: 关闭当前浏览器窗口...使用 submit 按键提交表单,或调用 form.submit 方法。 更详细的说明可以查考 MSDN 原文:onbeforeunload Event。 ?...事件,在点击链接test2、test3会触发iframe内的window.onbeforeunload事件,test1、test4则不会,尽管页面与iframe并非同一域。...我知道会有很多办法避免这种情况发生,比如改父层的实现==,但是这个页面是新浪微游戏的,我根本不可能有权力去要求什么… 所以想到一个办法是,在window.onbeforeunload函数里,判断当前鼠标的位置...from being called when doing an AJAX call 4、onbeforeunload event 5、Get Cursor Position with JavaScript

    1.9K20

    JS魔法堂:定义页面的Dispose方法——unload事件启示录

    前言  最近实施的同事报障,说用户审批流程后直接关闭浏览器,操作十余次后系统就报用户会话数超过上限,咨询4A同事后得知登陆后需要显式调用登出API才能清理4A端,否则必然会超出会话上限。  ...在浏览器地址栏输入地址,然后点击跳转; 点击页面的链接实现跳转; 关闭或刷新当前页面; 操作当前页面的Location对象,修改当前页面地址; 调用window.navigate实现跳转; 调用window.open...dispose) window.addEventListener('beforeunload', dispose) 坑3: 尊重用户的选择  有办法阻止用户关闭或刷新页面吗?...以前,当我们从页面A跳转到页面B,页面A的所有资源将被释放(销毁DOM对象,回收JS对象, 释放解码后的Image资源等);后来各大浏览器厂商分别采用bfcache/page cache/fast history...navigation机制,将页面A的状态保存到缓存中,当通过浏览器的后退/前进按钮跳转马上从缓存中恢复页面,而不是重新实例化。

    2.3K90

    如何让用户选择是否离开当前页面?

    抄一个微信公众号的编辑器的类似功能场景来实现 为什么要让用户选择是否离开页面 如果用户填写了很多数据此时 不小心点了其他a标签或者关闭浏览器,不做判断,那么用户数据直接丢了 梳理需求 离开页面方式,被...kk,a标签,关闭浏览器或者当前tab页等......用户选择离开就要继续逻辑,反之则不离开 正式开始 首先要知道一个事件:onbeforeunload,MDN的说明是:当浏览器窗口关闭或者刷新,会触发beforeunload事件。...不支持函数和DOM节点比较。...❞ 实现思路讲解 组件初始化时候,深拷贝一份表单数据存入组件中 当用户通过a标签离开页面,触发handlePrompt方法,存储离开的目的url,此时使用isEqual比较当前的数据和组件初始化的表单数据是否一致

    2.2K30

    离开页面前,如何防止表单数据丢失?

    使用 beforeunload 事件检测页面离开 我们创建 FormPrompt 组件,在其中添加 beforeunload 事件的监听器。此事件将在用户离开页面之前触发。...} /> ); }; 我们可以看到当我们在表格中输入信息并导航到主页...使用 Prompt ,导航到主页路由时行为正确,但是当用户输入表单数据并进入下一步,确认对话框也会出现。这是不希望的,因为我们在导航到下一步保存表单数据。...可以使用 message 属性来实现这一点,它也可以是一个函数。该函数的第一个参数是下一个位置。如果函数返回 true ,则允许转换到下一个 URL;否则,它可以返回一个字符串来显示提示。...该函数的一个参数是下一个位置,我们使用它来确定用户是否正在离开我们的表单。如果是这种情况,我们利用浏览器的 window.confirm 方法显示一个对话框,询问用户确认重定向或取消它。

    5.8K20

    用框架的你,可能早已忽略了这些事件API

    我们可以在那里做一些不涉及延迟的操作,例如关闭相关的弹出窗口。 有一个值得注意的特殊情况是发送分析数据。 假设我们收集有关页面使用情况的数据:鼠标点击,滚动,被查看的页面区域等。...如果我们要取消跳转到另一页面的操作,在这里做不到。但是我们可以使用另一个事件 —— onbeforeunload。...window.onbeforeunload 如果访问者触发了离开页面的导航(navigation)或试图关闭窗口,beforeunload 处理程序将要求进行更多确认。...我们希望我们的函数在 DOM 加载完成执行,无论现在还是以后。 document.readyState 属性可以为我们提供当前加载状态的信息。...当页面和所有资源都加载完成,window 上的 load 事件就会被触发。我们很少使用它,因为通常无需等待那么长时间。

    1.8K10

    「前端页面停留时长」统计上报方案

    当我们的H5页面是一个vue单页面应用,我们需要具体统计到每个路由的停留时长。 本文记录的是,我们自己实现的一套页面停留时长统计上报的方案,最后具体落地实施也是按这个方案走的。...同时在beforeEach中,我们可以记下即将进入的路由和被退出的路由名称,供上报使用。 2.是否能够监听全部的关闭事件?...浏览器兼容情况,这里需要试验的浏览器太多,我们直接找到网上的一个结论: IE浏览器 页面跳转、刷新页面能执行,但关闭浏览器不能执行; firefox 页面跳转能执行,但刷新页面、关闭浏览器不能执行; Safari...onbeforeunload 当窗口即将被卸载(关闭,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被取消. 可用于弹出对话框,提示用户是继续浏览页面还是离开当前页面。...,发现优先使用pagehide事件,onunload事件作为兜底,来记录关闭事件,是比较合适的方案。

    2.4K20

    ASP.NET 调味品:AJAX

    如今,使用 AJAX 的应用程序是合法的,因为多数浏览器都支持这项必需的技术。有关 AJAX 更详细的定义,请访问 AJAX Wikipedia entry(英文)。 AJAX 到底是什么?...术语可能有些混乱,但是当我介绍 AJAX ,就是在介绍从客户端异步调用服务器端函数的整体框架。提到 Ajax.NET ,我是指能够帮助您创建利用 AJAX 框架的解决方案的特定实现。...其次,我们将确保当用户关闭浏览器或导航到其他位置,解除对文档的锁定。后一个功能帮助确保文档不会永远处于锁定状态。...通常,可以通过触发 JavaScript OnBeforeUnLoad 事件或 OnUnload 事件达到此目的,这会打开新的小型弹出式窗口,该弹出式窗口在加载页面做一些清理然后自行关闭。... //如果用户关闭浏览器或点击“后退”按钮, //确保该文档会被解除锁定 window.onbeforeunload = ReleaseLock

    3.7K50

    ajax无刷新页面切换,历史记录后退前进解决方案

    问题描述 我们在工作中常常遇到需要用ajax来显示下一页和上一页,ajax可以不刷新页面进行操作!但是,假如你想通过浏览器的历史记录返回上一页和下一页。那么ajax默认是做不到的!...一般需求要历史返回的时候,我们通常不使用ajax。但是呢,假如一个页面中,只有一个地方是需要动态的上一页下一页,其他地方都是固定的,那么这种情况除了使用模板之外,我们使用ajax来操作显得格外方便!...事件,事件发生浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。...而当有浏览者点击浏览器“后退”或“前进”按钮,我们用下面的代码来响应用户的操作: window.onpopstate = function(event){ if(event.state){...可以用 if ('pushState' in history && history.state) {//进行初始化页面操作} 小问题 当我们每次点击,都会存一个pushState,当我们列表返回的时候,

    1.4K30

    奇奇怪怪的兼容性Bug

    image/gif" capture="camera"> 这段代码在非微信浏览器内能选中图片并上传,而在微信浏览器内就失效了,查了各种资料并没有找个解决方案,一次 偶然的机会将代码改成 <input id...最后代码为 或者使用JSSDK 参考:微信端input type=file 无法上传图片 网页刷新或标签页关闭发个请求...才是更好的,但是这个信息编辑页数据之间太复杂,接手项目再来梳理时间成本太高,考虑到已经有保存草稿这个功能,遂打算稍微改造这个接口用来做信息缓存,故需要考虑到网页刷新或标签页关闭发个请求。...项目中使用Axios做数据请求,但Axios异步的,不支持同步的请求,请求会被cancel。 与浏览器关闭事件相关事件有onunload和onbeforeunload两个。...区别在于onbeforeunload在onunload之前执行,它还可以阻止onunload的执行。因此我们着重关注onbeforeunload事件。

    1.1K10

    HTML事件属性--DOM

    离开页面之间触发的事件/之后触发的事件 打开f12,然后刷新,或者关闭浏览器,可以在浏览器触发事件 window.onbeforeunload = function(){...('浏览器窗口改变了') } demo查看 12.onunload 页面被下载触发,就是刷新或者关闭页面触发 window.onunload...} 13.onpopstate 当浏览器窗口记录改变时运行的脚本, 14.onredo 当文档执行撤销触发的事件 二、form事件属性 由html表单内触发的事件,通常使用在form元素中 1.onblur...} 这个事件的意思就是,当我对input内容进行操作改变后,浏览器会弹出一个alert demo查看 4.oncontextmenu 当用户右键操作触发该事件 可以绑定在任意元素中触发...但是onchange是在input失去焦点才触发,oninput是立刻触发 demo查看 7.oninvalid oninvalid事件要搭配required属性来使用 required如果使用该属性

    3.8K20

    HTTP跨域详解和解决方式

    除非我们使用global $a;从全局作用域引用该变量。 在PHP脚本中的变量作用域不算复杂,而将一个网站看做一个域,当它要引用其他域的资源,就需要目标域对原始域进行授权信任。...CORS 对于用户来说是无感知的,由浏览器自动完成 。 因为当前所有浏览器都支持该标准,并且由浏览器自动完成检测,所以当我们需要使用CORS的时候,只需要由服务端改动,前端不需要改动。...在siam网站写下index.html文件,让它使用ajax去请求siam2网站的内容。 <!...因为我们还没有在服务端中信任www.siam.com,所以浏览器不到信任站点信息,跨域请求失败。...我们还没有在服务端返回头部告诉浏览器说我们支持PUT方法,所以浏览器这里拿不到权限,报错了。 我们在服务端的代码添加头部 <?

    4.7K00

    WebSocket加入心跳包防止自动断开连接

    近日,在公司中开发一个使用websocket为前端推送消息的功能,发现一个问题:就是每隔一段时间如果不传送数据的话,与前段的连接就会自动断开; 刚开始以为是session的原因,因为web session...的默认时间是30分钟;但是通过日志发现断开时间间隔时间远远不到30分钟;认真分析发现不操作间隔恰好为90秒 它就会在自动断开;随恍然大悟;原来是我们的使用nginx 代理,nginx配置了访问超时时间为...websocket协议,建议使用新版谷歌、火狐等浏览器,请勿使用IE10以下浏览器,360浏览器使用极速模式,不要使用兼容模式!")...,当窗口关闭,主动去关闭websocket连接,防止连接还没断开就关闭窗口,server端会抛异常。...window.onbeforeunload = function() { ws.close(); } function reconnect(url) { if(lockReconnect

    4.6K20

    10+ 实用的 JavaScript 调试小技巧

    快速定位调试函数 当我们想在函数里加个断点的时候,一般会选择这么做: 在Inspector中找到指定行,然后添加一个断点 在脚本中添加一个debugger调用 不过这两种方法都存在一个小问题就是都要到对应的脚本文件中然后再找到对应的行...这边介绍一个相对快捷点的方法,就是在console中使用debug(funcName)然后脚本会在指定到对应函数的地方自动停止。...不过当我们调试我们自己的脚本的时候也会一不小心跳到这些文件中,引发额外的调试任务。解决方案呢就是禁止这部分不需要调试的脚本运行。...Postman 很多人习惯用Postman进行API调试或者发起Ajax请求,不过别忘了你浏览器自带的也能做这个,并且你也不需要担心啥认证啊这些,因为Cookie都是自带帮你传送的,这些只要在network...DOM变化检测 DOM有时候还是很操蛋的,有时候压根不知道啥时候就变了,不过Chrome提供了一个小的功能就是当DOM发生变化的时候它会提醒你,你可以监测属性变化等等: ?

    36110

    使用Ajax建立的Server Push和Iframe建立的Comet

    这里使用的例子就是一个在线CD销售页面,前台发起ajax请求,后台随机取一个数,从现在库中减去获得的随机数,然后返回给前台; 前台如果想改变库存的数据,在文字输入框输入相应的数量,然后提交给后台。...因为代码是从网上一篇文章(可点击查看详情)中下载过来的,他使用了prototype中的ajax,这里就没有作修改。...可以使用onsubmit=”return false;”进行阻止,AjaxLongPolling.js的初始化函数中对form的submit再进行监听就可以了。 目录结构大致是这样子: ?...> 2、使用Iframe建立的Comet 这里针对IE和其它浏览器做了不同的处理,因为IE中的htmlfile添加的iframe,在浏览器当前窗口的底部将看不到加载进度(看上去比较平静),而其它浏览器则会出现一个..._timer = null; } } } window.onbeforeunload = function() { Comet.onUnload(); } </script

    84620

    深入分析IE地址栏内容泄露漏洞

    前言 在本文中,我们探讨的对象是IE浏览器,尽管该浏览器略显老态,但是其用户还是很多的,所以不容忽视。...总之,我认为这些漏洞应该得到修补,或至少给IE用户一个醒目的警告,比如“我们不再支持这个浏览器,请使用Microsoft Edge”。 在我看来,微软正在试图摆脱IE,这个毫无疑问。...下面的代码将其对象的源指向object_location.html,但是当我们检索它的位置,它返回的是顶层窗口。 ? 在IE上进行测试 再次重申,这个混淆漏洞本身是没有用的,因为我们仍然在同一个域。...无论如何,在尝试实现UXSS(持久性是现实攻击中一切的关键),我获得了一个惊喜:当对象被注入到onbeforeunload,我们得到的不再是顶层窗口的位置,而是浏览器的将要到达的位置或当前写入地址栏的内容...在IE上进行测试 ---- 往期精选文章 使用虚拟dom和JavaScript构建完全响应式的UI框架 扩展 Vue 组件 使用Three.js制作酷炫无比的无穷隧道特效 一个治愈JavaScript疲劳的学习计划

    66450
    领券