JavaScript 获取当前页面路径与项目根路径的实现方法

作者:青柠

时间:2026-10-29

浏览:577

本文介绍如何使用 JavaScript 通过 window.document.location 对象获取当前网页的完整 URL、主机地址、目录路径以及包含斜杠的项目名称。通过结合 indexOf 和 substring 方法,计算出最终的项目根路径,适用于需要动态获取资源相对路径的前端场景。

文章目录

JavaScript 获取路径源码实现

1、源码架构

代码实现如下:

 
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JavaScript路径解析</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
function findPath()
{ 
//提取当前网页地址
var curNetAddr = window.document.location.href;
alert("提取当前网页地址:" + curNetAddr);
//提取主机地址后的目录部分
var hostPath = window.document.location.pathname;
alert("提取主机地址后的目录:" + hostPath);
//定位指定子串在字符串中首次出现的索引
var count = curNetAddr.indexOf(hostPath);
alert("定位指定子串在字符串中首次出现的索引:" + count);
//提取主机地址部分
var hostAddr = curNetAddr.substring(0,count);
alert("提取主机地址:" + hostAddr);
//提取包含前导斜杠的项目名称
var projectName = hostPath.substring(0,hostPath.substr(1).indexOf('/')+1);
alert("提取包含前导斜杠的项目名称:" + projectName);
//拼接完整项目路径
var path = hostAddr + projectName;
alert("拼接完整项目路径:" + path);
} 
</script>
</head>
<body>
<div id="body_div">
<input type="button" id="btn" value="获取路径" onclick="findPath()"/>
</div>
</body>
</html>

2、运行效果

(1)页面加载初始化阶段

JavaScript 获取路径源码实现

(2)提取当前网页地址

 JavaScript 获取路径源码实现

(3)提取主机地址后的目录部分

 JavaScript 获取路径源码实现

(4)定位指定子串在字符串中首次出现的索引

JavaScript 获取路径源码实现

(5)提取主机地址部分

JavaScript 获取路径源码实现

(6)提取包含前导斜杠的项目名称

JavaScript 获取路径源码实现

(7)拼接完整项目路径

JavaScript 获取路径源码实现

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章