如何获取浏览器URL中查询字符串的参数？

1.我们先认识一下Location对象。

Location对象包含了当前页面与位置(url)相关的信息

URL示例：http://www.baidu.com:80/news/index.aspx?id=1&name=wahaha

2.Location对象共定义了8个属性：（window.location.----）

window.location.

href:声明了当前显示文档的完整的URL

protocol:声明URL的协议部分，包括后缀的冒号，例如http:

host:声明当前URL的主机名和端口号(是hostname和port的合集)，例如www.baidu.com:80

hostname:声明当前URL的主机名，例如www.baidu.com

port:声明当前URL的端口部分，例如80

pathname:声明当前URL的路径部分，例如news/index.aspx

search:声明当前URL的查询部分，例如?id=1&name=localhost

hash:声明当前URL的锚的部分，例如#top，指定在文档中的锚记的名称

3.Location对象还有两个方法：

reload()和replace()

reload():刷新，即可以重新装载当前文档

replace():新的文档代替旧的文档，这样就不能通过【返回】按钮返回当前文档了。

4.Window对象的location属性和Document对象的location对象的区别

前者引用一个Location对象，后者只是一个只读字符串，并不具有Location对象的任何特性。
Document.location与document.URL是同义的。
但是，当存在服务器重定向时，document.location包含的是已经装载的URL,而location.href包含的则是原始请求的文档的URL。

实现页面的跳转方式
location.href = "url地址"
window.location = "url地址"

获取当前页面信息对象
console.log(window.location)
console.log(document.location)

 

5.什么是查询字符串？

就是Location对象的search属性的值，在这里指?id=1&name=location

6.实现查询字符串中的参数

 //http://www.baidu.com:80/news/index.aspx?id=1&name=wahaha

function windowHref(name) {
        //获取当前显示文档的完整的URL(字符串)
        var sHref = window.location.href;
        //将字符串以？分割成数组
        var args = sHref.split('?');
        //判断数组的第一个元素是否==完整的url地址
        if (args[0] == sHref) {
            //如果==，说明没有可查询的参数，则返回一个空串，函数执行结束
            return "";
        }

        //将args的第二个元素(字符串)以 & 分割成数组
        var arr = args[1].split('&');
        //设置空对象
        var obj = {};

        for (var i = 0; i < arr.length; i++) {
            //将arr中的每个元素以 = 分割成数组
            var arg = arr[i].split('=');
            //将arg 的 第一个元素作为key值，第二个元素作为value值，存储在obj对象中
            obj[arg[0]] = arg[1];
        }
        return obj[name];
    }
    console.log(windowHref("name"));//wahaha