zoukankan      html  css  js  c++  java
  • 使用js修改url地址参数并修改url地址

    注: 微信小程序和公众号内屏蔽了  eval() 函数,需要用其他方法解决

    修改浏览器地址参数:

    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; 
            } 
        }
    }
    
    /**
     * 获取url里的参数
     * @param arg 参数名
     * @returns
     */
    function getURLString(arg) { 
        var reg = new RegExp("(^|&)" + arg + "=([^&]*)(&|$)", "i"); 
        var r = window.location.search.substr(1).match(reg); 
        if (r != null) 
            return unescape(r[2]);
        return null; 
    } 
    //调用结果如下: 
    var url = window.location.href; 
    changeURLArg(url, "id", 99); // http://www.csdn.com/?id=99&ttt=3 
    changeURLArg(url, "haha", 33); // http://www.csdn.com/?id=99&ttt=3&haha=33

    读取URL中的参数、修改URL参数、动态修改URL replaceState js代码

    /*
    *获取URL参数
    */
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    };

    2、修改URL参数

    //替换指定传入参数的值,paramName为参数,replaceWith为新值
    function replaceParamVal(paramName,replaceWith) {
        var oUrl = this.location.href.toString();
        var re=eval('/('+ paramName+'=)([^&]*)/gi');
        var nUrl = oUrl.replace(re,paramName+'='+replaceWith);
        this.location = nUrl;
    window.location.href=nUrl
    }

    使用:

    //http://www.aazj.cn/pc/meeting/card.html?skinColor=30&gid=-1&userId=566&modid=1133&puid=9
    
    replaceParamVal("userId","333")
    
    //http://www.aazj.cn/pc/meeting/card.html?skinColor=30&gid=-1&userId=333&modid=1133&puid=9

    3、动态修改URL

    var newUrl="新的Url";
    var stateObject = 0;
    var title="0"
    history.replaceState(stateObject,title,newUrl);

    javascript 删除 url 中指定参数,并返回 url

    实现代码

    // 删除url中某个参数,并跳转
    function funcUrlDel(name){
        var loca = window.location;
        var baseUrl = loca.origin + loca.pathname + "?";
        var query = loca.search.substr(1);
        if (query.indexOf(name)>-1) {
            var obj = {}
            var arr = query.split("&");
            for (var i = 0; i < arr.length; i++) {
                arr[i] = arr[i].split("=");
                obj[arr[i][0]] = arr[i][1];
            };
            delete obj[name];
            var url = baseUrl + JSON.stringify(obj).replace(/["{}]/g,"").replace(/:/g,"=").replace(/\,/g,"&");
            return url
        };
    }
    //url: http//xx.com/list?page=1&a=5
    
    执行代码
    funcUrlDel("page")
    
    //http//xx.com/list?a=5

    修改浏览器地址:

    浏览器窗口有一个history对象,用来保存浏览历史。

    检查浏览器是否支持 
    if (window.history){ 
    // 支持History API 
    } else { 
    // 不支持 
    }

    history对象提供了一系列方法,允许在浏览历史之间移动。

    其中包括 
    history.back(); 回退
    history.forward(); 前进
    history.go(0)//刷新当前页面;

    HTML5为history对象添加了两个新方法,history.pushState()和history.replaceState(),用来在浏览历史中添加和修改记录。

    都会改变浏览器标签栏中的URL值,区别在于pushState()会将之前的地址记录在history对象中,通过back()可以返回前一页,replaceState()则不能返回

    转:

    https://blog.csdn.net/weixin_34240657/article/details/92264873

    https://blog.csdn.net/WuLex/article/details/89194384

    https://blog.csdn.net/WuLex/article/details/89204850

    修改 浏览器 地址 https://blog.csdn.net/baiyan_er/article/details/80901553

    https://www.cnblogs.com/lbcxq/p/11842713.html

  • 相关阅读:
    [Swift通天遁地]五、高级扩展-(2)扩展集合类型
    [Swift通天遁地]五、高级扩展-(1)快速检测设备属性:版本、类型、屏幕尺寸
    [Swift]LeetCode266.回文全排列 $ Palindrome Permutation
    [Swift]LeetCode265.粉刷房子 II $ Paint House II
    [Swift]LeetCode264.丑数 II | Ugly Number II
    [Swift通天遁地]四、网络和线程-(15)程序内购功能
    [Swift通天遁地]四、网络和线程-(14)创建一个Socket服务端
    hdu 4888 Redraw Beautiful Drawings(最大流,判环)
    【剑指offer】斐波那契序列与跳台阶
    Asp.NET之对象学习
  • 原文地址:https://www.cnblogs.com/fps2tao/p/12365470.html
Copyright © 2011-2022 走看看