JavaScript JSはlocationオブジェクトを利用してページurl、サーバアドレス、ポート番号、プロジェクトルートパス、およびクエリパラメータを取得します.

本論文では、JavaScript略称JSが、どのようにlocationオブジェクトを利用してページurlアドレス(href)、サーバアドレス(hostname)、サーバポート番号(port)、context path、プロジェクト展開経路またはプロジェクトルートパスおよびurlクエリパラメータ解析を取得するかについて述べる.Java webプロジェクトがtomcatに展開されている例では、プロジェクト(mco-saaserp)の展開が完了した後、サーバの構成パラメータによって、プロジェクトのアクセス方式は2種類あります.例えば: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/view/site/logine.は同じです.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コードを修正する必要があります.正確なベースを設定します.url側は、例えばメンバー1:base_を設定して作業できます.url=http://localhost:8081/メンバー2:ベースをセットするurl=http://localhost:8082/メンバー3:ベースをセットするurl=http://localhost:8083/mco-saaserp/

ラッキーなことに、プロジェクトのcontext-pathは基本的に確定されているので、「/mco-saaserp」ではないので、locations.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+取得項目のアドレスは検索文字列で、locations.searchに対応していますので、urlパラメータを解析すると、「?tn=monling&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パラメータを抽出することができると考えられています.最初の文字列取得;2)中国語の文字の文字化けに注意してください.