简介
说明
本文用示例介绍如何使用JavaScript获取当前页面的这些数据:域名、端口号、Url、相对路径和参数、指定参数。
测试方法
本文用此网址来测试:javascript:void(0)
访问之后,在浏览器里使用Console来测试:

location的属性
windows.location有如下属性,可以通过windows.location.xxx获取。
| 属性 | 值 | 举例结果 | 
| href | 完整的 URL | http://localhost:8080/project/front/user/serviceIndex?type=1 | 
| protocol | 协议 | http: | 
| host | 主机 | localhost:8080 | 
| hostname | 主机名 | localhost | 
| port | 端口号 | 8080 | 
| host | 主机名+端口号 | localhost:8080 | 
| pathname | 当前 URL 的相对路径 | /project/front/user/serviceIndex | 
| search | 当前 URL 的参数 | ?type=1 | 
| hash | #开始的锚 | 
获取当前域名
法1:window.location.host
var domain = window.location.host;
console.log(domain);结果:knife.blog.csdn.net
法2:document.domain
var domain = document.domain;
console.log(domain);结果:csdn.net
获取端口号
法1:window.location.port
var port = window.location.port;
console.log(port);结果:undefined
本处是域名网址,所以没有端口号
获取url
有如下四种方式,获得的都是整个url。
- window.location.href
- self.location.href
- document.URL
- document.location.href
例:
var url = window.location.href;
console.log(url);结果:javascript:void(0)
获取域名+端口+路由
window.location.href; 获取的url会把?后面的参数也带过去,如果不需要后面的参数,可以这样处理:
let routerIndex = window.location.href.indexOf('?');
let url = window.location.href.slice(0, routerIndex > 0 ? routerIndex : window.location.href.length);
console.log(url);结果:javascript:void(0)
获取相对路径
首先获取 Url,然后把 Url 通过 // 截成两部分,再从后一部分中截取相对路径。如果截取到的相对路径中有参数,则把参数去掉。
function getUrlRelativePath()
{
  var url = document.location.toString();
  var arrUrl = url.split("//");
  var start = arrUrl[1].indexOf("/");
  var relUrl = arrUrl[1].substring(start);//stop省略,截取从start开始到结尾的所有字符
  if(relUrl.indexOf("?") != -1){
    relUrl = relUrl.split("?")[0];
  }
  return relUrl;
}调用方法:getUrlRelativePath();
结果:/article/details/121482997
获取参数
法1:正则表达式
function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var result = window.location.search.substr(1).match(reg);
    if (result != null) {
       return unescape(result[2]);
    }
    return null;
}
getQueryString('ab');结果:12
法2:split拆分法
function getRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
             for(var i = 0; i < strs.length; i ++) {
                     theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
              }
        }
    return theRequest;
}
console.log(getRequest()['ab']);结果:12









