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

想要知道怎样解决这个问题,首先我们先认识一下Location对象。

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

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

Location对象共定义了8个属性:

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,指定在文档中的锚记的名称

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

想必大家会想,这个与link对象的url属性类似啊,不过link对象表示的是文档中的超链接,而Location对象表示的是浏览器当前显示文档的url。

当然,Location对象还有两个方法:reload()和replace()

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

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

通过将url字符串信息赋值给窗口的location属性来装载新文档,可以实现返回浏览。

对那些使用了框架而且显示多个临时也的网站来说,replace()方法比较有用,这样临时页面都不被存储在历史列表中。

注意:

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

什么是查询字符串?就是Location对象的search属性的值,在这里指?id=1&name=location

那么用Locaton对象结合String对象的方法怎么获取呢?可以用下面这个函数获取:

function getQuery(name)

{

var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if (r!=null) return unescape(r[2]); return null;

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 首先要知道Location这个对象以及这个对象中的一些属性: href:设置或返回完整的url.如本博客首页返回h...
    ninja梅梅阅读 1,879评论 0 1
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,001评论 19 139
  • HTML标签解释大全 一、HTML标记 标签:!DOCTYPE 说明:指定了 HTML 文档遵循的文档类型定义(D...
    米塔塔阅读 3,331评论 1 41
  • 鸿衔书云尔鬼缠, 一汪清泉水涟...
    莫笙仁阅读 339评论 0 0
  • 快乐的情绪很少,有个清愁因子作祟!离女主远着,被炮灰只是分分钟!叹离愁悲絮,纷纷扰扰!一杯酒一壶茶,只是安了环境!...
    司竹空阅读 220评论 0 0