JavaScript JS利用location对象获取页面url、服务器地址、端口号、项目根路径和查询参数

  本文讲述JavaScript简称JS如何利用location对象获取页面url地址(href)，服务器地址(hostname)，服务器端口号(port)，context path，项目部署路径或项目根路径及url查询参数解析。
  以Java web项目部署在tomcat为例，项目（mco-saaserp）部署完成后，根据服务器配置参数不同，项目访问方式有2种：
1）context path=“/”，可通过服务器+端口号直接访问；
如：http://localhost:8081/views/site/login.html
如果是80端口，则端口号可以省略，如：http://localhost/views/site/login.html
location对象输出如下：

Location http://localhost:8081/views/site/login.html
	host: "localhost:8081"
	hostname: "localhost"
	href: "http://localhost:8081/views/site/login.html"
	origin: "http://localhost:8081"
	pathname: "/views/site/login.html"
	port: "8081"
	protocol: "http:"
	search: ""

2）context path="/mco-saaserp"，可通过服务器+ context path+端口号访问；
如：http://localhost:8081/mco-saaserp/views/site/login.html
同理，如果80端口，端口号可以省略。
location对象输出如下：

Location http://localhost:8081/mco-saaserp/views/site/login.html
	host: "localhost:8081"
	hostname: "localhost"
	href: "http://localhost:8081/mco-saaserp/views/site/login.html"
	origin: "http://localhost:8081"
	pathname: "/mco-saaserp/views/site/login.html"
	port: "8081"
	protocol: "http:"
	search: ""

1、项目根路径获取

在实际项目中，经常需要动态指定url，如：ajax请求url，页面跳转url，常见处理方式为：

// 目标url = base_url + (请求或页面path，如：/views/site/login.html, /sybase/login.do等）
// context-path = "/"
var base_url = "http://localhost:8081/";

// context-path = "/mco-saaserp"
// var base_url = http://localhost:8081/mco-saaserp/
 
function toUrl(path) {
	return base_url + path;
}
console.log(toUrl("/sybase/login.do")); //http://localhost:8081/sybase/login.do

该方式存在2个问题：

• 服务器与本地context-path不一致时，发布到服务器时，需要修改服务器文件js代码；
• 团队开发情况下，团队成员可能需要修改js代码，设置正确的base_url方可工作，如：
  成员1：设置base_url=http://localhost:8081/
  成员2：设置base_url=http://localhost:8082/
  成员3：设置base_url=http://localhost:8083/mco-saaserp/

幸运的是，由于项目的context-path基本上是确定的，不是"/“就是“/mco-saaserp”，因此我们可以通过location.href中是否可以查找到”/mco-saaserp"来判断context-path是哪种情况，从而得出项目根路径，代码如下：

function getBaseUrl(context) {
	var location = window.document.location;
	var pagePath = location.pathname; //mco-saaserp/views/site/login.html
	context = context || "";
	if (context != "") {
		var pos = pagePath.indexOf("/" + context);
		context = pos > -1 ? context : "";
	}
	return location.protocol + "//" + location.host + "/" + context;
}

var base_url = getBaseUrl('mco-saaserp')
// 若context-path = /, 则base_url=http://localhost:8081/
// 若context-path = /mco-saaserp, 则base_url=http://localhost:8081/mco-saaserp／

2、url参数解析

url路径?=后面的谓之url参数，比如：

https://www.baidu.com/baidu?tn=monline_3_dg&ie=utf-8&wd=js+获取项目地址
console.log(location.search); //?tn=monline_3_dg&ie=utf-8&wd=js+获取项目地址

则tn=monline_3_dg&ie=utf-8&wd=js+获取项目地址就是查询字符串，对应location.search，因此解析url参数，就是解析"?tn=monline_3_dg&ie=utf-8&wd=js+获取项目地址"字符串，代码如下：

function getParam() {
	var _url = null, name = null;
	if(arguments.length == 0) return null;
	if(arguments.length == 1) {
		_url = window.document.location.href, name = arguments[0];
	} else if(arguments.length == 2){
		_url = arguments[0], name = arguments[1];
	} else {
		return null;
	}
	if(_url.indexOf("?")>=0) _url = _url.substr(_url.indexOf("?") + 1);
   	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个正则表达式
   	var r = _url.match(reg);  //匹配目标参数
   	if (r != null) return decodeURIComponent(r[2]); 
   	return null; //返回参数值
}
getParam("https://www.baidu.com/baidu?tn=monline_3", "tn"); //monline_3

//假设url: http://localhost:8081/views/site/login.html?timestamp=11212121212
getParam("timestamp");  //11212121212

说明：
1）getParam函数考虑到可以提取给定url参数，查询字符串通过截取url ?开始的字符串获取；
2）注意中文字符乱码问题。