客户需求:“若关闭浏览器或跳转其他页面,弹窗提示是否保存当前编辑内容,目前用户在工作过程中,存在容易点错跳转其它页面导致已输入内容未保存的情况”
既然尊敬的客户提出了需求,那就想办法满足吧。
首先是浏览器的关闭提醒:
这个随便一搜,到处都是相关的帖子,而且JavaScript也支持“onbeforeunload”这个window事件,有兴趣的可以详细了解下window.onbeforeunload事件,大概作用是1.关闭或者刷新浏览器给出弹窗提醒 2.地址栏地址发生了变化,也会给出弹窗提示。
用法如下:
<script type="text/javascript">
//浏览器关闭、刷新触发提醒弹窗
window.onbeforeunload = function () {
return '确认要关闭当前窗口?';
}
</script>
效果(谷歌浏览器):
浏览器提示好实现,参考网上别人家的资料,看到给编辑页body标签上也加上onbeforeunload事件就OK了,当时心中窃喜,以为不过如此。当回到我正做的这个后台系统时,傻了眼,卧槽!我页面body在哪???
研究了好半天,才发现原来页面body包含了左侧的导航栏和右侧的内容页。
内容页才是编辑页所在的地方,客户提的需求就是会误点左侧的导航栏导致页面未保存就跳转走了。
那咋办啊?网上给的body上加onbeforeunload事件明显没用啊。
有问题就解决,刚开始思路是将整个导航栏看做一个div,点击这个区域就触发弹窗提示,即使你点击了导航栏上的空白区域,也会提示,更不要说点击跳转链接了。不规范的操作总是带来一些问题,点击导航栏的链接之后,触发点击区域click事件之后,用window.confirm()来提示进行确定离开或者取消操作。当点击取消按钮之后,谷歌浏览器用window.stop()能阻止跳转链接加载页面,但是火狐和IE浏览器竟然先执行跳转,弹窗后出来。想哭...
作为一个弱鸡程序员,不知道是方向不对还是能力不够,查了很多资料,比如js的加载顺序、执行事情的顺序、handle事件啥的,最终也没有解决这个问题。
$(".sidebar-collapse").click(function (e) {
if (!window.confirm('确认要离开当前窗口?')) {
if (window.stop)
//谷歌、火狐浏览器
window.stop();
else
//IE浏览器
document.execCommand("Stop");
}
});
客户是上帝啊,需求肯定要实现啊...不知不觉头发又掉了几根
在和上司以及同事的帮助下,帮我找了一条实现需求的路。就是利用window.localStorage作为全局变量的属性,给定一个isLock的属性项,当进入编辑页时,就将isLock的值设为1(锁定状态),当点击左侧导航栏触发类名为.tatgetlink a的click事件时,判断isLock的值是否是锁定状态,如果是的话就弹窗,点取消按钮,利用return false直接阻断了跳转事件,终于实现了需求。
<script type="text/javascript">
//写入全局变量
if (window.localStorage) {
localStorage.setItem("isLock", "1");
}
</script>
终于实现需求...
代码之路真的是又艰又长啊