获取onbeforeunload的返回结果，在检测到取消离开页面后执行操作 |
您所在的位置：网站首页 › 电话提示保存还是取消 › 获取onbeforeunload的返回结果，在检测到取消离开页面后执行操作 |
|
检测onbeforeunload返回结果，在检测到取消离开页面后执行操作
我们常常关闭一个网页时候，会弹出来一个窗口提示我们是否确定要关闭网页，操作没有保存之类的。一定程度上想把我们留在网页上。 这种的实现主要是 用的 window.onbeforeunload事件。 与window.load 类似。
有时候，我们需要知道我们在window.onbeforeunload中点的确定还是取消。 当用户点取消的时候我们要执行一些操作。 比如，我们有一个带效果的菜单，然后我们点击了菜单的一个标签，菜单的突出效果执行到了新的 一个 标签 上面去， 但是这个时候页面阻止了我们离开页面，并且我们取消了离开页面， 那么我们就要恢复 菜单的状态。 把新的标签效果恢复到旧的标签 上去。
这时候我们就要知道我们是不是 取消了离开页面呢。
事实 上可以换个思路 。 只要取消离开页面，就去执行我们的 还原操作。 根本不用判断onbeforeunload的结果，设置一个setTimeout定时任务。在里面执行我们要做的事情。 如果关闭了页面，后面的js代码就不会执行。 如果没关。就执行定时任务里要做的事情。 相当于是直接在这个onbeforeunload后面的js序列里面插入了一些操作。 由于javascript的阻塞性质，不管我们这个setTimeout设定的时间间隔有多小（太小如0貌似不行），都要等到这个我们把这个alert关闭才会执行。如果我们时间间隔够小，那么一关闭alert就会执行了。代码如下。 window.onbeforeunload = function b(){ timer = setTimeout(beforeloadResult, 50)} return '确认离开网页？'; }; function beforeloadResult () { alert("你取消了离开网页！");} 理想情况下，如果留在了页面，就会执行beforeloadResult()而弹出1。如果离开了页面就不会执行。 事实上，在火狐浏览器下，即使页面关闭了，也依然会执行 beforeloadResult();但是并没有暂停脚本执行，没有达到理想的效果。可能是因为网页关闭的时间比 执行 beforeloadResult() 所花的时间要长的原因。 我们还要进一步完善我们的代码： 1.创建一个定时任务，这个定时任务的功能是创建另一个定时任务。 2.在另一个定时任务里，定时执行我们的beforeloadResult();这个定时任务开始计算时间的时候，就是我们确定（或取消）关闭网页的时候。 定时任务会在alert结束之后生效，也就是说 在取消（或确定）关闭页面的时候，第一个定时任务，创建了第二个定时任务，开始计时，这个任务将在50微秒之后执行beforeloadResult()——并不是立刻执行。 而50微秒，页面已经关掉了，就不会继续执行了。这个时间远超过了执行beforeloadResult()的时候。 beforeloadResult()彻底没机会执行。（ 这个定时器并不是在onbeforeunload时就创建的，而是等alert一消失才开始建立的。） 完善后的代码： window.onbeforeunload = function b(){ setTimeout(function(){ setTimeout(beforeloadResult, 50)} , 50); return '确认离开网页？'; }; function beforeloadResult () { alert("你取消了离开网页！");} 记录一下这个思路。还是有一点小技巧在里面。 供需要的人参考。
演示地址：http://runningls.com/demos/2015/onbeforeunload.html
|
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |