解析网页URL关键属性与获取项目根路径-优快云博客

常用的路径获取方式如下：

window.location.pathname：设置或获取对象指定的“文件名”或路径。

window.location.href:设置或获取整个 URL 为字符串。

window.location.port:设置或获取与 URL 关联的端口号码。

window.location.protocol:设置或获取 URL 的协议部分。

window.location.hash:设置或获取 href 属性中在井号“#”后面的分段。

window.location.host:设置或获取 location 或 URL 的 hostname 和 port 号码。

window.location.search:设置或获取 href 属性中跟在问号及其后面的部分(包含问号)。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
	$(function(){
		var strFullPath=window.document.location.href;
		var strPath=window.document.location.pathname;
		var pos=strFullPath.indexOf(strPath);
		var prePath=strFullPath.substring(0,pos);
		var postPath=strPath.substring(0,strPath.substr(1).indexOf('/')+1);
		var basePath = prePath;
		basePath = prePath + postPath;	
		$("#path").text(basePath);
		//以上内容为获取项目根路径的完整代码
		
		//以下内容为测试内容
		var port  = window.location.port;
		var protocol  = window.location.protocol;
		var hash  = window.location.hash;
		var host  = window.location.host;
		var search  = window.location.search;
		$("#href").text(strFullPath);
		$("#pathname").text(strPath);
		$("#protocol").text(protocol);
		$("#hash").text(hash);
		$("#host").text(host);
		$("#port").text(port);
		$("#search").text(search);
	});
</script>
<body>
	<div>
		<p>项目路径：<span  id="path"></span></p>
		<p>href：<span  id="href"></span></p>
		<p>pathname：<span  id="pathname"></span></p>
		<p>port：<span  id="port"></span></p>
		<p>protocol：<span  id="protocol"></span></p>
		<p>hash：<span  id="hash"></span></p>
		<p>host：<span  id="host"></span></p>
		<p>search：<span  id="search"></span></p>
	</div>
</body>
</html>

结果如下图所示：