location对象的方法_服务器url地址怎么查「建议收藏」

location对象的方法_服务器url地址怎么查「建议收藏」本文讲述JavaScript简称JS如何利用location对象获取页面url地址(href),服务器地址(hostname),服务器端口号(port),contextpath,项目部署路径或项目

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)注意中文字符乱码问题。

今天的文章location对象的方法_服务器url地址怎么查「建议收藏」分享到此就结束了,感谢您的阅读。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/76419.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注