js监听离开或刷新页面时的弹窗提示

一、看图
图片描述

二、使用场景。

填写表单时内容，当离开页面或者刷新的时候回丢失页面的内容，因此人性化的设计该有一个提示。所以这样的功能也就应用而生了。

三、思路。

1，页面内容改变。2，离开或刷新浏览器触发事件。

四、知识点。

1，如图需要填写内容的地方（即会发生改变的地方）包括input[radio],input[text],select,textarea几种。
2，触发事件选用onchange。
3，离开页面触发的事件选用onbeforeunload。

五、上代码了，就这么简单：

$(document).on("change","input,textarea,select",function(){
    window.onbeforeunload = function(event) {
          return "您编辑的信息尚未保存，您确定要离开吗？"//这里内容不会显示在提示框，为了增加语义化。
    };
});

六、其他方法

可以保存到一个json里边，然后比较json是否相同，不过这样就比较复杂了。
提供一个demo，感兴趣的同学看一下效果。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <script type="text/javascript">
            var jsonObjA = {
                "Name": "MyName",
                "Company": "MyCompany",
                "Infos": [{
                        "Age": "100"
                    },
                    {
                        "Box": [{
                                "Height": "100"
                            },
                            {
                                "Weight": "200"
                            }
                        ]
                    }
                ],
                "Address": "弗洛伦萨"
            }
            var jsonObjB = {
                "Name": "MyName",
                "Company": "MyCompany",
                "Infos": [{
                        "Age": "100"
                    },
                    {
                        "Box": [{
                                "Height": "100"
                            },
                            {
                                "Weight": "200"
                            }
                        ]
                    }
                ],
                "Address": "达芬奇的故乡"
            }

            function isObj(object) {
                return object && typeof(object) == 'object' && Object.prototype.toString.call(object).toLowerCase() == "[object object]";
            }

            function isArray(object) {
                return object && typeof(object) == 'object' && object.constructor == Array;
            }

            function getLength(object) {
                var count = 0;
                for(var i in object) count++;
                return count;
            }

            function Compare(objA, objB) {
                if(!isObj(objA) || !isObj(objB)) return false; //判断类型是否正确
                if(getLength(objA) != getLength(objB)) return false; //判断长度是否一致
                return CompareObj(objA, objB, true); //默认为true
            }

            function CompareObj(objA, objB, flag) {
                for(var key in objA) {
                    if(!flag) //跳出整个循环
                        break;
                    if(!objB.hasOwnProperty(key)) {
                        flag = false;
                        break;
                    }
                    if(!isArray(objA[key])) { //子级不是数组时,比较属性值
                        if(objB[key] != objA[key]) {
                            flag = false;
                            break;
                        }
                    } else {
                        if(!isArray(objB[key])) {
                            flag = false;
                            break;
                        }
                        var oA = objA[key],
                            oB = objB[key];
                        if(oA.length != oB.length) {
                            flag = false;
                            break;
                        }
                        for(var k in oA) {
                            if(!flag) //这里跳出循环是为了不让递归继续
                                break;
                            flag = CompareObj(oA[k], oB[k], flag);
                        }
                    }
                }
                return flag;
            }

            var result = Compare(jsonObjA, jsonObjB);
            console.log(result); // true or false
        </script>
    </body>

</html>

七、遇到的问题。

提示框的样式不能改变，个人感觉不太美观，有方法改变的同学一定告诉我哈。

猜你喜欢