1.Js页面A跳转到页面B及URL携带参数:

1.传递参数:

window.location.href = "./list.html?id="+id;
window.location.href = "../html/trainingOrghome.html?" + "accountTypeId="+2+"&openid="+openid+"&nickname="+nickname;

2.接收参数:
接收参数函数封装

跳转后得页面用getQueryString方法获取参数

这个方法有时候获取 为空 ,具体原因:window.location.search为空的解决办法_window.location.search方法为空-CSDN博客

此时通过 window.location.search 获取到的参数为空"",这是因为使用了hash导致,因为hash会将url中第一个#后的内容都作为hash内容,所以search为空了. 

//这是search的获取 可能会为空
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null && r[2] != "false")
        return unescape(r[2]);
    return false;
}
let openID = getQueryString('openid');
let accountTypeId = getQueryString('accountTypeId');
let nickname = getQueryString('nickname');
let headimgurl = getQueryString('headimgurl');

//如果上面这种location.search的方式为空,那么就用传整个href获取
let href = window.location.href;
let personName = this.getUrlParam("personName", href);//不写href的话,默认为当前的url
//url中解析参数
    getUrlParam:function(name, urlsearch) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            urlsearch || location.search
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },

方法二 URLSearchParams()函数(记不住函数名的可以直接在浏览器里面打印)推荐!

     var url2 = 'https://gitbook.cn/gitchat/geekbooks?tag=%E5%A4%A7%E6%95%B0%E6%8D%AE&name=gy&age=22';
        //var url2 = window.location.herf
        var temp2 = url2.split('?')[1];
        var pram2 = new URLSearchParams('?'+temp2);
        console.log(pram2.get('tag')); // 大数据
        console.log(pram2.get('name'));// gy
        console.log(pram2.get('age')); // 22
        console.log(temp2);   //tag=%E5%A4%A7%E6%95%B0%E6%8D%AE&name=gy&age=22

方法三 使用正则表达式 

//获取url中的参数方法
        function getUrlParam(name) {
            //构造一个含有目标参数的正则表达式对象
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            //匹配目标参数
            var r = window.location.search.substr(1).match(reg);
            //返回参数
            if (r != null) {
                return unescape(r[2]);
            } else {
                return null;
            }
        }
        var ABC = getUrlParam('age');
        console.log(ABC);


js 判断url的?后参数是否包含某个字符串

 js判断url里面是否包含某参数

1、调用最底下的方法判断
let pName = this.getQueryString("name");//没有会返回 false ↑面的方法
let personName = this.getUrlParam("personName", href);//没有会返回 null ↓底下的方法

if(personName){ //pName
    console.log('带了参数')
}

2、
function getQueryString(name){
   var reg=eval("/"+name+"/g");
   var r = window.location.search.substr(1);
   var flag=reg.test(r);
   if(flag){
        return true;
   }else{
       return false;
   }
}

GetQueryString("night");

3、
if(window.location.href.indexOf("test")>-1){ //includes
	console.log(222)
}
// 解码用 
decodeURIComponent(str)
// 编码用 
encodeURIComponent(str)

从 URL 获取查询参数 

可以通过传递 window.location 或原始 URL goole.com?search=easy&page=3 轻松地从 url 检索查询参数
const getParameters = (URL) => {
  URL = JSON.parse(
    '{"' +
      decodeURI(URL.split("?")[1])
        .replace(/"/g, '\\"')
        .replace(/&/g, '","')
        .replace(/=/g, '":"') +
      '"}'
  );
  return JSON.stringify(URL);
};

getParameters(window.location);
// Result: { search : "easy", page : 3 }

或者更为简单的:
Object.fromEntries(new URLSearchParams(window.location.search))
// Result: { search : "easy", page : 3 }

 获取window.location.href里的参数值

如何在window.location.href中获取值? - IT屋-程序员软件开发技术分享社区

let href = window.location.href;

let personName = this.getUrlParam("personName", href);//不写href的话,默认为当前的url

//url中解析参数
    getUrlParam:function(name, urlsearch) {
      return (
        decodeURIComponent(
          (new RegExp("[?|&]" + name + "=" + "([^&;]+?)(&|#|;|$)").exec(
            urlsearch || location.search
          ) || [, ""])[1].replace(/\+/g, "%20")
        ) || null
      );
    },

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐