判断url中存在一个值并进行修改

2019-06-20

前言

实现需求：当用户从A页面点击链接跳转到B页面,B页面自动显示弹框。要注意的是，只有从A页面点击进入B页面才显示弹框，否则不显示弹框，并且当用户在B页面点击关闭弹框刷新时，不会再次显示弹框。这里就需要在A页面跳转到B页面的时候在url中传入一个标志goSetting= 1，在B页面判断是否存在这个标志，存在则显示弹框，否则不显示。并且在关闭弹框的时候改变B页面url的标志的值goSetting= 0，否则刷新的时候会一直显示弹窗。

主要代码

<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="js/jquery.min.js"></script>
    <title>Title</title>
</head>
<body>
<button id="clickHandle">点击</button>
<script>
	//将数组转化为对象
    function queryToObject(arr) {
        let newArr = []
        let params = {}
        arr.forEach(function(e, index) {
            newArr = e.split('=')
            params[newArr[0]] = newArr[1]
        })
        return params;
    }
    var goSetting = window.location.search.split('?')[1];
    if(goSetting){
        var goSettingStatus = goSetting.split("&")
        var queryObject = queryToObject(goSettingStatus);
        if(queryObject.goSetting === '1'){
            console.log('显示弹框')
        }
    }

 	// 修改url中的一个参数的值
    function changeURLArg(url,arg,arg_val){
        var pattern=arg+'=([^&]*)';
        var replaceText=arg+'='+arg_val;
        if(url.match(pattern)){
            var tmp='/('+ arg+'=)([^&]*)/gi';
            tmp=url.replace(eval(tmp),replaceText);
            return tmp;
        }else{
            if(url.match('[\?]')){
                return url+'&'+replaceText;
            }else{
                return url+'?'+replaceText;
            }
        }
    }

    $("#clickHandle").on("click",function () {
        var newUrl = changeURLArg(window.location.href,'goSetting','0')
        window.history.replaceState('', '', newUrl);
    })
</script>
</body>
</html>