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

首先要知道Location这个对象以及这个对象中的一些属性:

href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/

host:设置或返回主机名和当前的URL的端口号。本博客首页返回www.cnblogs.com

hostname:设置或返回当前URL的主机名。本博客首页返回www.cnblogs.com

hash:设置或返回从井号(#)开始的URL(锚)。本博客首页返回 空

pathname:设置或返回当前URL的路径部分。本博客首页返回/wymninja/

port:设置或返回当前URL的端口号。本博客首页返回 空

protocol:设置或返回当前URL的协议。本博客首页返回 http:

search:设置或返回从问号 (?) 开始的 URL(查询部分)

location对象属性图示:图片来自慕课网

location的href属性存放的是文档的完整 URL,其他属性则分别描述了 URL 的各个部分。这些属性与 Anchor 对象(或 Area 对象)的 URL 属性非常相似。当一个 Location 对象被转换成字符串,href 属性的值被返回。这意味着你可以使用表达式 location 来替代 location.href。不过 Anchor 对象表示的是文档中的超链接,Location 对象表示的却是浏览器当前显示的文档的 URL(或位置)

var s = location.toString();
console.log(s);
#result
//http://www.cnblogs.com/wymninja/

Location对象的这些属性都是可读可写的,如果改变了文档的location.href,则浏览器会载入新的页面。同样如果改变了location.hash,则页面会跳转到新的锚点,但此时页面不会重载。

Location对象还有三个方法:assign()、reload()、replace()

assign():加载新的文档

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

replace():可以装载一个新文档而无须为它创建一个新的历史记录。也就是说,在浏览器的历史列表中,新文档将替换当前文档。这样就不能通过【返回】按钮返回当前文档了。

注意:

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

所以要获取浏览器URL中查询字符串的参数。也就是location.search部分。以慕课网图片为例就是?courseid = 8&cahpterid = 86中的8和86!!!!然后就利用如下代码:

function getQuery(name){
  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);//从?之后开始匹配如getQuery(courseid)返回一个数组["courseid=8","","8","&",index:0,input:"courseid=8"]   if (r!=null) return unescape(r[2]); return null;
}

其中:

对match不清楚可查阅我的博客Javascript string对象

unescape 对参数进行解码,如空格解码为20%。

时间: 2024-12-27 23:15:11

如何用js获取浏览器URL中查询字符串的参数的相关文章

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

例:http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23 $(function(){    var obj={};    function getParams(){     var href=window.location.href;//获取网址http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=x

三个获取浏览器URL中参数值的方法

这三个是一般的获取浏览器传的参数值的方法,之前有用unescape()解码的方法,但是遇到汉字会产生乱码,所以用decodeURI(); 方法一: function getQueryString(name) { //获取url方法 编辑传来的参数 //之前decodeURI是用的unescape() 有时候会取汉字乱码 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); var r

js获取页面url中的各项值

一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location.host; host2=document.domain; 应用场景:页面跳转,开发环境和测试环境域名不同,所以需要动态获取后进行拼接跳转的url. 二.javascript正则获取url中的参数 1.通过substr配合split获取 //正则获取url中的参数     function URL_

如何用JS获取ASP.net中的textbox的值 js获不到text值

<tr>                        <td class="table_body" style="width: 10%" align="right">                            工作目标                        </td>                        <td class="table_none" st

【前端】提取URL中的各个GET参数

1 /**************************** 2 * 有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e, 3 * 请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定), 4 * 将其按key-value形式返回到一个json结构中, 5 * 如{a:'1', b:'2', c:'', d:'xxx', e:undefined}. 6 ******************

HTTP-URL中查询字符串格式化

HTTP-URL中查询字符串格式化 GET请求是最常见的请求类型,常用语向服务器查询某些信息.必要时,需要将查询字符串追加到URL末尾.有的时候为了根据URL中查询字符串的不同渲染不同的页面也需要读取URL中的查询字符串.如何避免在URL写入查询字符串时报出格式错误 及 如何更快捷读出URL中查询字符串就是这篇博客要解决的问题. https://www.baidu.com/baidu?wd=%C6%E2%C7%E0%F1%C6+csdn&tn=monline_dg 在这个URL中 ? 后的字符串

JS获取浏览器可视区域尺寸

在没有声明DOCTYPE的IE中,浏览器显示窗口大小只能以下获取: document.body.offsetWidth document.body.offsetHeight 在声明了DOCTYPE的浏览器中,可以用以下来获取浏览器显示窗口大小: document.documentElement.clientWidth document.documentElement.clientHeight IE,FF,Safari皆支持该方法,opera虽支持该属性,但是返回的是页面尺寸: 同时,除了IE以外

js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)

网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.body.offsetWidth (包括边线的宽);网页可见区域高: document.body.offsetHeight (包括边线的宽);(点击查看大图)有没有发现,offsetWidth和clientWidth的区别,offsetWidt是连滚动条一起包含在内的. 网页正文全文宽: documen

js 获取浏览器高度和宽度值

js 获取浏览器高度和宽度值 IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 document.documentElement.clientHeight ==> 可见区域高度 FireFox中: document.body.clientWidth ==> BODY