获取window.location.href里面的值、获取URL中的参数、Js页面A跳转到页面B及URL携带参数
·
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里面是否包含某参数
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
);
},
更多推荐
已为社区贡献35条内容
所有评论(0)