javascript浏览器参数的操作，js获取浏览器参数

2014年9月21日 28918次浏览

引子

作为前端，不可避免的经常对浏览器地址进行操作，要获取浏览器的参数，很简单，方法也很多，我之前经常自己用js的indexof +substr来获取，这样获取相对费事一点，不是很好。今天在这里总结一下浏览器参数获取及参数的操作。

js获取浏览器参数

单纯的用js获取浏览器参数比较简单，我今天介绍一个用正则来写的获取参数的方法，相对比较好一些。

function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
    }

就上面这一个小小的函数就可以轻松的搞定！

假如你的地址是：

http://www.haorooms.com/uploads/example/urloperate/demo1.html?name=11111&zz=haorooms

调用方法

console.dir(getQueryString("name"));

console.dir(getQueryString("zz"));

谷歌浏览器f12 console的输出结果：

11111
haorooms

该函数用下来的缺点是不支持浏览器中有中文，有中文的时候，还是建议用下面的浏览器操作方法！

案例请查看

js操作浏览器参数

对于js操作浏览器参数，我之前用的是UrlEdit来操作浏览器参数，记得我第一次运用这个还是2年前，是分页中对浏览器地址的操作。

今天这个方法我也会列出，但是会有更好的函数来对浏览器进行操作！

方法一

代码如下：

;(function(window, document) {

    var UrlParas = function(url) {
        return UrlParas.fn.init(url);
    }
    UrlParas.VERSION = '1.0.0';
    UrlParas.fn = UrlParas.prototype = {

        url: "",
        pathname: "",
        paras: "",
        init: function(url) {
            this.url = url;
            this.pathname = url.split("?")[0];
            this.paras = this.get();
            return this;
        },

        //以object类型返回url参数及其取值
        get: function(option) {
            var paraStr, paras,
                url = this.url;
            if (url) {
                paraStr = url.split("?")[1];
                if (paraStr) {
                    paras = {};
                    paraStr = paraStr.split("&");
                    for (var n in paraStr) {
                        var name = paraStr[n].split("=")[0];
                        var value = paraStr[n].split("=")[1];
                        paras[name] = value;
                    }
                } else {
                    return {};
                }
                if (!option) {
                    return paras;
                } else {
                    return paras[option] ? paras[option] : "";
                }


            }
        },

        //重设url参数取值，若无此参数则进行创建,若参数赋值为null则进行删除
        set: function(option) {
            var i, name, val;
            if (arguments.length == 2) {
                name = arguments[0];
                val = arguments[1];
                option = {
                    name: val
                };
            }
            if ("string" === typeof option) {
                this.paras[option] = "";
            } else if ("object" === typeof option) {
                for (i in option) {
                    if (option[i] === null) {
                        delete this.paras[i];
                    } else {
                        this.paras[i] = option[i];
                    }
                }
            } else {

            }
            return this.build();
        },

        //删除url中指定参数返回新url
        remove: function(option) {
            var i;
            if ("string" === typeof option) {
                option = option.split(",");
                for (i in option) {
                    delete this.paras[option[i]]
                }

            }
            return this.build();
        },

        //根据url和处理过的paras重新构件url
        build: function() {
            var i,
                newUrl = this.pathname + "?";

            for (i in this.paras) {
                newUrl += (i + "=" + this.paras[i] + "&");
            }

            return newUrl.substr(0, newUrl.length - 1);
        }


    }

    UrlParas.fn.init.prototype = UrlParas.fn;

    window.urlParas = UrlParas;

})(window, document);

有朋友不仅要问了，为什么在函数function前面加一个分号？很简单，是为了将来打包压缩，要是你不加分号的话，将来要是对js进行压缩的话，很容易出现问题啊！

使用方法

//用法示例
testUrl = "http://www.haorooms.com/test/haorooms.html?lang=2&tt=22";
console.log(urlParas(testUrl).get());
console.log(urlParas(testUrl).get("lang"));
console.log(urlParas(testUrl).set("test2","22222"));
console.log(urlParas(testUrl).set("111", "bean"));
console.log(urlParas(testUrl).set({
    "ajax": "ok",
    "lang": null,
    "trswq": null
}));
console.log(urlParas(testUrl).set({
    zcsdf: "zcsdf",
    cesahi: "ceadasdads",
    lang: "zh-cn"
}));
console.log(urlParas(testUrl).remove("lang,tt"));
console.log(urlParas(testUrl).pathname);

案例请查看

方法二

这个方法就是我很久之前用的一个方法，也可以，但是用起来相对麻烦一些！

代码如下：

var UrlEdit=(function(lg){
    var objURL=function(url){
        this.ourl=url||window.location.href;
        this.href="";//?前面部分
        this.params={};//url参数对象
        this.jing="";//#及后面部分
        this.init();
    }
    //分析url,得到?前面存入this.href,参数解析为this.params对象，#号及后面存入this.jing
    objURL.prototype.init=function(){
        var str=this.ourl;
        var index=str.indexOf("#");
        if(index>0){
            this.jing=str.substr(index+1);
            str=str.substring(0,index);
        }
        index=str.indexOf("?");
        if(index>0){
            this.href=str.substring(0,index);
            str=str.substr(index+1);
            var parts=str.split("&");
            for(var i=0;i<parts.length;i++){
                var kv=parts[i].split("=");
                this.params[kv[0]]=kv[1];
            }
        }
        else{
            this.href=this.ourl;
            this.params={};
        }
    }
    //只是修改this.params
    objURL.prototype.set=function(key,val){
        this.params[key]=val;
    }
    //只是设置this.params
    objURL.prototype.remove=function(key){
        this.params[key]=undefined;
    }
    //根据三部分组成操作后的url
    objURL.prototype.url=function(){
        var strurl=this.href;
        var objps=[];//这里用数组组织,再做join操作
        for(var k in this.params){
            if(this.params[k]){
                objps.push(k+"="+this.params[k]);
            }
        }
        if(objps.length>0){
            strurl+="?"+objps.join("&");
        }
        if(this.jing.length>0){
            strurl+=this.jing;
        }
        return strurl;
    }
    //得到参数值
    objURL.prototype.get=function(key){
        return this.params[key];
    }   
    lg.URL=objURL;
    return lg;
}(UrlEdit||{}));

function urlset(name, value, params)
{
    var myurl=new UrlEdit.URL(document.URL);
    myurl.set(name, value);
    if (params != "" && params != null && params != undefined)
    {
        var paramArr = params.split(';');
        for (var i = 0; i < paramArr.length; i++)
        {
            if (paramArr[i] != "")
            {
                myurl.remove(paramArr[i]);
            }
        }
    }
    return myurl.url();
}


function strurlset(url, name, value, params)
{
    var myurl=new UrlEdit.URL(url);
    myurl.set(name, value);
    if (params != "" && params != null && params != undefined)
    {
        var paramArr = params.split(';');
        for (var i = 0; i < paramArr.length; i++)
        {
            if (paramArr[i] != "")
            {
                myurl.remove(paramArr[i]);
            }
        }
    }
    return myurl.url();
}

用法如下：

//用法示例
testUrl = "http://www.haorooms.com/test/haorooms.html?lang=2&tt=22";
    var myurl=new UrlEdit.URL(testUrl);
console.log(myurl.get("lang"));
console.log(myurl.set("sssss","sadasdasdas"));
console.log(myurl.remove("lang"));
console.log(myurl);
console.log(myurl.url());

案例请查看

为了方便童鞋们使用，现在将代码打包，

案例下载

浏览器URL操作简单办法

分解URl

// 正则：
/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/
// 结果格式：
Array 
    [scheme] => http 
    [host] => haorooms.com 
    [user] => user 
    [pass] => pass 
    [path] => /about-me 
    [query] => t=100102 
    [fragment] => hash 
)

// demo:
'http://user:pass@haorooms.com:80/post/?s=css3#first' 
.match(/^([^:]+):\/\/(?:([^:@]+):?([^@]*)@)?(?:([^/?#:]+):?(\d*))([^?#]*)(?:\?([^#]+)?)?(?:#(.+)?)?$/);
// 结果
["http://user:pass@haorooms.com:80/post/?s=css3#first", "http", "user", "pass", "haorooms.com", "80", "/post/", "s=css3", "first"]

获取URl参数

function parseUrl(url) {
    // 找到url中的第一个?号
    var parse = url.substring(url.indexOf("?") + 1),
        params = parse.split("&"),
        len = params.length,
        item = [],
        param = {};

    for (var i = 0; i < len; i++) {
        item = params[i].split("=");
        param[item[0]] = item[1];
    }

    return param;
}

// demo:
parseUrl("www.haorooms.com/js?name=haorooms&age=21&page=2")
// 结果
{name: "haorooms", age: "21", page: "2"}

URL参数拼接

/**
 * @description 将传入的url参数对象解析组装成字符串做为queryString中的一部分
 * @param {Object} params 请求参数的数组
 * @param {string} cgi 请求串
 * @return {String} queryString部分字符串
 * @example ： param1=value1&param2=value2&param3=value3......
 */
function convert_params(params, cgi){
    var paramsArray = [];
    for (var name in params) {
        if (paramsArray.length == 0) {
            cgi && cgi.indexOf('?') != -1 ? paramsArray.push("&") : paramsArray.push("?");
        }
        else {
            paramsArray.push("&");
        }
        paramsArray.push(name);
        paramsArray.push("=");
        paramsArray.push(params[name]);
    }
    return paramsArray.join("");
}

console.log(convert_params({"param": "value1", "param2": "value2"}, "/post/"));
// ?param=value1&param2=value2
console.log(convert_params({"param": "value1", "param2": "value2"}, "/post/?page=1"));
// &param=value1&param2=value2

获取URL后面锚点ID

例如：

http://www.haorooms.com/#haorooms

要获取后面的#haorooms。

有的同学可能还要获取浏览器地址，然后用indexOf获取到#的位置，然后在拿到#haorooms，或者其他比较繁琐的办法，今天讲一个最简单有效的方法，用js自带方法就可以获取，一句代码搞定！

var thisId = window.location.hash;

就可以直接获取到#haorooms

我们可以进行如下判断：

   var thisId = window.location.hash;
    if(thisId != "" && thisId != undefined){

    }

js点击弹框优酷视频，并控制视频播放和暂停及重新载入的方法

js实现网页换肤功能,javascript网页更换皮肤功能

Tags: js， javascript