首先要知道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%。

JS获取浏览器URL中查询字符串的参数的更多相关文章

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

    首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...

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

    首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回http://www.cnblogs.com/wymninja/ host:设置或返回主 ...

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

    如何获取浏览器URL中查询字符串的参数? 想要知道怎样解决这个问题,首先我们先认识一下Location对象. Location对象包含了当前页面与位置(url)相关的信息 URL示例:http://w ...

  4. 请用js写一个函数,实现获取浏览器url中查询字符串中的参数并返回一个数组

    <script> console.log(getUrlArr()); function getUrlArr() { var arr = []; var url = "http:/ ...

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

    测试地址为:http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23 实例如下: ...

  6. 获取浏览器URL中查询字符串中的参数

    //http://www.runoob.com/index.html?name=xiaoming&age=23function showWindowHref(){ var sHref = wi ...

  7. 获取url中查询字符串参数

    // 获取url中查询字符串参数 例如http://www.test.com?a=1&b=2 function RequestParamete() { var url = window.loc ...

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

    这三个是一般的获取浏览器传的参数值的方法,之前有用unescape()解码的方法,但是遇到汉字会产生乱码,所以用decodeURI(); 方法一: function getQueryString(na ...

  9. js获取页面url中的各项值

    一. 通过window.location获取各项参数 1.获取页面完整的url url = window.location.href; 2.获取页面的域名 host = window.location ...

随机推荐

  1. NETCLR via C#第四版(文摘)

    第1部分 CLR基础 第1章 CLR的执行模型 第2章 生成,打包,部署和管理应用程序及类型 第3章 共享程序集和强命名程序集 第2部分 设计类型 第4章 类型 第5章 基元类型 引用类型和值类型 第 ...

  2. (7)Why 30 is not the new 20

    https://www.ted.com/talks/meg_jay_why_30_is_not_the_new_20/transcript 00:12When I was in my 20s, I s ...

  3. OSI七层模型和TCP/IP四层模型

    1)网络层负责点到点的传输(这里的“点”指主机或路由器),而传输层负责端到端的传输(这里的“端”指应用进程) 2)ARP协议介于数据链路层和网络层之间(IPv4专有,IPv6的地址映射功能在ICMPv ...

  4. IntelliJ IDEA 2017版 使用笔记(五) 模板 live template自定义设置(二) ;postfix使用;IDE快捷键使用

    一.live template 活模板     就像这个单词的含义一样,live template就是一个高效的提高代码,书写速度的方式,(live template位置File-----settin ...

  5. UVaLive 3357 Pinary (Fib数列+递归)

    题意:求第 k 个不含前导 0 和连续 1 的二进制串. 析:1,10,100,101,1000,...很容易发现长度为 i 的二进制串的个数正好就是Fib数列的第 i 个数,因为第 i 个也有子问题 ...

  6. 解决Linux下IDEA无法使用ibus输入法的问题和tip乱码

    一:可以先按网上的配置/etc/profile里的输入法的一些参数,我是先配置了这些参数的,但是输入法还是没用,后来一直没管它了,今天用了一些方式可以了但不敢保证不需要先配置那些参数: 二:情况:开启 ...

  7. Bagging和Boosting的区别

    转:http://www.cnblogs.com/liuwu265/p/4690486.html Bagging和Boosting都是将已有的分类或回归算法通过一定方式组合起来,形成一个性能更加强大的 ...

  8. python的基础socket知识

    对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. 代码意思if __name__ == '__main__':是主文件的话就先执行main函数, ...

  9. XML与DTD

    什么是XML XML个称为Extensible Markup Language,意思是可扩展的标记语言. 应用常见 配置文件 <?xml version="1.0" enco ...

  10. 微信小程序-bindtap事件与冒泡

    bindtap就是点击事件 在.wxml文件绑定: <text id='textId' data-userXxx='100' bindtap='tapMessage'>cilck here ...