当前位置: 首页>前端>正文

如何调用浏览器接口清除缓存 JavaScript js调用浏览器的保存功能

客户需求:“若关闭浏览器或跳转其他页面,弹窗提示是否保存当前编辑内容,目前用户在工作过程中,存在容易点错跳转其它页面导致已输入内容未保存的情况”

既然尊敬的客户提出了需求,那就想办法满足吧。

首先是浏览器的关闭提醒:

这个随便一搜,到处都是相关的帖子,而且JavaScript也支持“onbeforeunload”这个window事件,有兴趣的可以详细了解下window.onbeforeunload事件,大概作用是1.关闭或者刷新浏览器给出弹窗提醒 2.地址栏地址发生了变化,也会给出弹窗提示。

用法如下:

<script type="text/javascript">
    //浏览器关闭、刷新触发提醒弹窗
    window.onbeforeunload = function () {
        return '确认要关闭当前窗口?';
    }
</script>

效果(谷歌浏览器):

如何调用浏览器接口清除缓存 JavaScript js调用浏览器的保存功能,如何调用浏览器接口清除缓存 JavaScript js调用浏览器的保存功能_click事件,第1张

 

浏览器提示好实现,参考网上别人家的资料,看到给编辑页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>

如何调用浏览器接口清除缓存 JavaScript js调用浏览器的保存功能,如何调用浏览器接口清除缓存 JavaScript js调用浏览器的保存功能_click事件_02,第2张

 

终于实现需求...

代码之路真的是又艰又长啊


https://www.xamrdz.com/web/2z91960068.html

相关文章: