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）注意中文字符亂碼問題。