【JS】获取当前页面的url的参数和相对路径

简介: 【JS】获取当前页面的url的参数和相对路径

前言


因为代码和逻辑都比较简单,也有一些注释,就直接上代码了!

另外,如果要获取<script>标签src属性值url的参数和相对路径可以参考:获取<script>标签src属性的url跟的参数和相对路径(无论引入的JS是外部、内部)


测试效果


微信截图_20220520175806.png


核心js代码


<script type="text/javascript">
    var params = getUrlParam();
    for (var param in params) {
        console.log(param, ":", params[param]);
    }
    // 获取当前页面的url
    function getRelativeUrl() {
        var arraytemp = getSplitUrl();
        // console.log(arraytemp)
        // console.log(arraytemp[0].lastIndexOf("/"));
        var urlNum = arraytemp[0].lastIndexOf("/");
        if (urlNum > 0 && arraytemp[0].length > urlNum) {
            return arraytemp[0].substring(0, urlNum + 1);
        } else {
            return arraytemp[0];
        }
    }
    // 获取当前外部引入script里的src路径
    function getSplitUrl() {
        var href = window.location.href;
        var url = href.split("?");
        return url;
    }
</script>


完整html代码


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>【JS】获取页面的url的参数和相对路径(掘金-南方者)</title>
</head>
<body>
    <h1>掘金-南方者</h1>
    <a href="https://juejin.cn/user/2840793779295133/posts">传送门</a>
</body>
<script type="text/javascript">
    var params = getUrlParam();
    for (var param in params) {
        console.log(param, ":", params[param]);
    }
    // 获取当前页面的url
    function getRelativeUrl() {
        var arraytemp = getSplitUrl();
        // console.log(arraytemp)
        // console.log(arraytemp[0].lastIndexOf("/"));
        var urlNum = arraytemp[0].lastIndexOf("/");
        if (urlNum > 0 && arraytemp[0].length > urlNum) {
            return arraytemp[0].substring(0, urlNum + 1);
        } else {
            return arraytemp[0];
        }
    }
    // 获取当前外部引入script里的src路径
    function getSplitUrl() {
        var href = window.location.href;
        var url = href.split("?");
        return url;
    }
</script>
</html>


文章小尾巴


文章写作、模板、文章小尾巴可参考:《写作“小心思”》


  感谢你看到最后,最后再说两点~


  ①如果你持有不同的看法,欢迎你在文章下方进行留言、评论。

  ②如果对你有帮助,或者你认可的话,欢迎给个小点赞,支持一下~


  我是南方者,一个热爱计算机更热爱祖国的南方人。


  (文章内容仅供学习参考,如有侵权,非常抱歉,请立即联系作者删除。)



目录
相关文章
|
8月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
153 1
|
5月前
|
数据采集 JavaScript Android开发
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
158 7
【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
|
5月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
140 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
6月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
245 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
6月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
137 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
4月前
|
JavaScript 前端开发 API
纯js轻量级页面顶部Loading进度条插件
纯js轻量级页面顶部Loading进度条插件
|
8月前
|
存储 缓存 网络协议
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点,GET、POST的区别,Cookie与Session
计算机网络常见面试题(二):浏览器中输入URL返回页面过程、HTTP协议特点、状态码、报文格式,GET、POST的区别,DNS的解析过程、数字证书、Cookie与Session,对称加密和非对称加密
|
8月前
|
域名解析 缓存 网络协议
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
浏览器中输入URL返回页面过程(超级详细)、DNS域名解析服务,TCP三次握手、四次挥手
|
8月前
|
JavaScript 前端开发 索引
JavaScript获取url网址中域名后面的部分
如何截取 url 中网站域名之后的部分,需要用到以下几个方法:
204 3
|
9月前
|
存储 开发框架 JavaScript
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单
284 0
Node.js实现短链接(ShortLink):shortid、epxress让URL更简单

热门文章

最新文章