js中的location的href和pathname,search

最新推荐文章于 2025-07-04 15:20:03 发布

转载最新推荐文章于 2025-07-04 15:20:03 发布 · 1.4k 阅读

js与jquery 专栏收录该内容

48 篇文章

订阅专栏

本文深入解析JavaScript中的Location对象，详细阐述了href、pathname和search属性的功能及应用。通过实例展示了如何利用这些属性来获取和修改URL的不同部分，适用于前端开发者理解和操作网页URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js中的location的href和pathname,search
在我们使用浏览器中访问一个url，HTTP GET获取到一个资源后。我们可以查看浏览器的location对象。
比如，我们search一下，在浏览器中会出现下面的url：

https://www.bing.com/search?q=location.href+location.pathname&go=%E6%8F%90%E4%BA%A4&qs=n&form=QBLH&pq=location.href+location.pathname&sc=0-14&sp=-1&sk=&ghc=1&cvid=be38977d2c4d483ba842e8019853315f

使用window.location.href
得到的结果时浏览器地址栏中的完整地址串：
“https://www.bing.com/search?q=location.href+location.pathname&go=%E6%8F%90%…ion.pathname&sc=0-14&sp=-1&sk=&ghc=1&cvid=be38977d2c4d483ba842e8019853315f”

window.location.pathname
得到URL的路径部分(就是请求映射的地址)
“/search”

如果我们修改pathname，则浏览器中的地址栏url的pathname部分就会改变，并触发新的http get操作。但是后面接着的参数长串依然存在。

window.location.search
得到的是：
“?q=location.href+location.pathname&go=%E6%8F%90%E4%BA%A4&qs=n&form=QBLH&pq=location.href+location.pathname&sc=0-14&sp=-1&sk=&ghc=1&cvid=be38977d2c4d483ba842e8019853315f”

其他：

window.location.host
“www.bing.com”

window.location.hostname
“www.bing.com”

window.location.port
“”
==== 说明： URL 的端口部分
如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符
本例返回值:”“

window.location.hash
如果使用了锚点，比如对于这样一个URL
http://localhost:8080/search?ver=1.0&id=6#herepointer
锚点返回值:#herepointer

---------------------
作者：whereismatrix
来源：优快云
原文：https://blog.youkuaiyun.com/whereismatrix/article/details/47001267
版权声明：本文为博主原创文章，转载请附上博文链接！