使用js获取当前页面地址栏参数的两种方法

最新推荐文章于 2024-09-30 08:45:42 发布

燃烧的果果

最新推荐文章于 2024-09-30 08:45:42 发布

阅读量2.1k

点赞数

分类专栏： javascript 文章标签： js

本文链接：https://blog.csdn.net/shy311409030208/article/details/78763698

版权

javascript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏



/*
    window.location是一个对象，包含属性有：
    hash 从井号 (#) 开始的 URL（锚）
    host 主机名和当前 URL 的端口号
    hostname 当前 URL 的主机名
    href 完整的 URL
    pathname 当前 URL 的路径部分
    port 当前 URL 的端口号
    protocol 当前 URL 的协议
    search 从问号 (?) 开始的 URL（查询部分）
*/

//获取window.location.href是最常用的

//方法一、采用正则表达式获取地址栏指定参数
    function GetQuery(name)
    {
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if(r!=null)return  unescape(r[2]); return null;
    }
    //假如我当前页面的地址为：http://localhost/d3js/analyze.html?firstProp=sepal_length&secondProp=sepal_width
    //测试用例
    console.log(GetQuery("firstProp")); //结果：sepal_length
    console.log(GetQuery("secondProp"));//结果：sepal_width

    //看一下window.location.search和window.location.href的区别：
    console.log(window.location.search); //输出?号以后的：?firstProp=sepal_length&secondProp=sepal_width

    console.log(window.location.href);//输出整个url：http://localhost/d3js/analyze.html?firstProp=sepal_length&secondProp=sepal_width

//方法二、单个参数的获取方法
    function GetRequest(url) {
        var props = [];
        if (url.indexOf("?") != -1) {    //判断是否有参数
            var parameters = url.split("?")[1]; 
            var parametersArr = parameters.split("&");
            for(var i = 0; i < parametersArr.length; i++) {
                props.push(parametersArr[i].split("="));
            }
        }
        return props;
    }

    var url = location.href; //获取当前完整的url
    var firstProp, secondProp;//等会放url参数的变量
    var request=GetRequest(url);//结果是一个包含所有参数对的二维数组
    //如果你没有传参数的话,我们要加一个判断 
    if(request != null && request.length === 2) {
        firstProp = request[0][1];
        secondProp = request[1][1];
    }
    console.log(firstProp+","+secondProp); //输出：sepal_length,sepal_width