如何获取浏览器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
原文地址:https://www.cnblogs.com/SRH151219/p/10370317.html