获取当页面url属性 window.location 整理

1、查看 window.location 包含属性

// object 结构
{
    "ancestorOrigins": {},
    "href": "http://localhost:8100/autocase?a=1&utoken=ey&cc=3",
    "origin": "http://localhost:8100",
    "protocol": "http:",
    "host": "localhost:8100",
    "hostname": "localhost",
    "port": "8100",
    "pathname": "/autocase",
    "search": "?a=1&utoken=ey&cc=3",
    "hash": ""
}

 2、各字段属性说明

属性名    描述
href    完成的url
host    主机名和当前url的端口号
hash    从#号开始的url(锚)
hostname    当前url的主机名
port    当前url的端口号
pathname    当前url的路径部分
protocol    当前url的协议
search    从?开始的url(查询部分)

3、获取参数对象方法

// 方法一: window.location.href 中解析
const parseUrlParams = (url) => {
  const params = {}
  if (!url || url === '' || typeof url !== 'string') {
    return params
  }
  const paramsStr = url.split('?')[1]
  if (!paramsStr) {
    return params
  }
  const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ')
  for (let i = 0; i < paramsArr.length / 2; i++) {
    const value = paramsArr[i * 2 + 1]
    params[paramsArr[i * 2]] =
      value === 'true' ? true : value === 'false' ? false : value
  }
  return params
};
let param = parseUrlParams(window.location.href).token 
console.log(param)

// 方法二: window.location.href 中解析
const getValueByUrlParams = (paras) => {
  let url = window.location.href;
  var paraString = url.substring(url.indexOf("?") + 1, url.length).split("&");
  var paraObj = {}
  var i, j
  for (i = 0; j = paraString[i]; i++) {
  paraObj[j.substring(0, j.indexOf("=")).toLowerCase()] = j.substring(j.indexOf("=") + 1, j.length);
  }
  var returnValue = paraObj[paras.toLowerCase()];
  if (typeof(returnValue) == "undefined") {
  return "";
  } else {
  return returnValue;
  }
};
let param = getValueByUrlParams("token")  
console.log(param)

// 方法三:window.location.search 中解析
const getRequest = (url) => {
  // var url = window.location.search; //获取url中"?"符后的字串
  let theRequest = new Object();
  // 判断是否有问号
  if (url.indexOf("?") != -1) {
    // 把问号去掉
    var str = url.substr(1);
    // 判断是否有多个参数
    if(str.indexOf("&") != -1) {
      // 以&符分项组成数组
      let strs = str.split("&");
      for (var i = 0; i < strs.length; i++) {
        // 循环数组
        // theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        // 每一项等号左边为属性,等号右边为属性的值,值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
        theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
      }
    } else {
      // 只有一个参数
      let arr = str.split("=");
      theRequest[arr[0]] = arr[1];
    }
  };
  return theRequest;
};
let params_obj = getRequest(window.location.search);  
console.log(params_obj) 

猜你喜欢

转载自blog.csdn.net/bulucc/article/details/128926326