[日常开发问题：2]获取当前页面URL地址，修改再转为URL地址

最新推荐文章于 2024-08-12 10:38:25 发布

一个前端小小程序员

最新推荐文章于 2024-08-12 10:38:25 发布

阅读量1.3k

点赞数

文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_271334644/article/details/129555674

版权

先说获取本地的地址问题：

需要了解的内容部分：JavaScript Window Location

了解这部分的内容才能够去操作URL，简单了解

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

具体可参考该位置内容https://www.runoob.com/js/js-window-location.html

直奔主题：获取当前页面的URL地址：获取到的就是一个字符串

<script>
    var strAddress = window.location.pathname;
    console.log("当前页面地址", strAddress);
</script>

将当前获取到的地址进行修改

<script>
    var strAddress = window.location.pathname;
    console.log("当前页面地址", strAddress);
    var AdrressArray = strAddress.split('/'); //去掉'/' 转为数组
    console.log("修改后的数据",AdrressArray);
</script>

可以发现去除掉 “/”后，之前的地址变为了数组。那么接下来的操作实际上就是js中数组的操作。数组操作内容具体不在详细阐述，只使用我们当前问题中需要使用的方法。

join();

功能：将数组转为字符串并返回转化的字符串数据，不会改变原来的数组；

pop();

功能：删除数组的最后一位，并且返回删除的数据，会改变原来的数组

push();

功能：在数组的最后一位新增一个或多个数据，并且返回新数组的长度，会改变原来的数组

splice();

功能：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。

还是拿数据说话。

<script>
    var strAddress = window.location.pathname;
    console.log(strAddress);
    if (strAddress) {
        var AdrressArray = strAddress.split('/');
        console.log(AdrressArray);
         AdrressArray.splice(0, 3);  //删除一些元素，从下标0开始，到3结束
        console.log(AdrressArray);
        AdrressArray.pop()   //删除尾部元素
        console.log(AdrressArray);
    }
    else {
        console.log("3");
    }
</script>

通过删除特定的元素后，在控制台所保留的内容就是最下面内容['27133','Desktop','text']这三个内容。接下来进行拼接。通过join（）方法

<script>
    var strAddress = window.location.pathname;
    console.log(strAddress);
    if (strAddress) {
        var AdrressArray = strAddress.split('/');
        console.log(AdrressArray);
         AdrressArray.splice(0, 3);  //删除一些元素，从下标0开始，到3结束
        console.log(AdrressArray);
        AdrressArray.pop()   //删除尾部元素
        console.log(AdrressArray);
        var afterSplic=AdrressArray.join('/'); //用于接收拼接后的地址信息
        console.log("更改后的数据",afterSplic);
    }
    else {
        console.log("3");
    }
</script>

以上我们需要的内容就完成了，当然我们还要实现当前的页面地址获取后，进行修改，然后再跳转到另一个页面。

此时我们仍然要用到window.location 中的方法

 window.location.href = window.location.protocol + '//' + window.location.host + afterSplic;  //页面当前地址=协议+//+端口+修改后的地址

此时即可完成页面的跳转。

一个简单示例

设计描述：两个页面，一个页面上设计一个按钮，点击后通过获取URL地址后，进行数据的修改和拼接，然后进入到另一个页面，另一个页面只作为展示功能使用。

test.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>Document</title>
</head>

<body>
    <button onclick="Jump()">点击跳转</button>
</body>

</html>

<script>
    function Jump() {

        var strAddress = window.location.pathname;
        if (strAddress) {
            var AdrressArray = strAddress.split('/');
            console.log(AdrressArray);
            AdrressArray.pop()   //删除尾部元素
            console.log(AdrressArray);
            AdrressArray.push('test2.html'); 
            console.log(AdrressArray);
            var afterSplic = AdrressArray.join('/'); //用于接收拼接后的地址信息
            console.log("更改后的数据", afterSplic);
             window.location.href = window.location.protocol + '//' + window.location.host + afterSplic;
        }
        else {
            console.log("3");
        }
    }
</script>

test2.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>Document</title>
</head>

<body>
    <h1>你好</h1>
</body>

</html>

运行展示：