为什么 window.location.search 为空?

简介: 1,什么是window.location?示例URL:http://b.a.com:88/index.php?name=kang&when=2011#first属性含义值protocol:协议"http:"hostname:服务器的名字"b.

1,什么是window.location?示例

URL:http://b.a.com:88/index.php?name=kang&when=2011#first

属性 含义
protocol: 协议 "http:"
hostname: 服务器的名字 "b.a.com"
port: 端口 "88"
pathname: URL中主机名后的部分 "/index.php"
search: "?"后的部分,又称为查询字符串 "?name=kang&when=2011"
hash: 返回"#"之后的内容 "#first"
host: 等于hostname + port "b.a.com:88"
href: 当前页面的完整URL "http://www.a.com:88/index.php?name=kang&when=2011#first"

window.location和document.location互相等价的,可以交换使用

location的8个属性都是可读写的,但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL,而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有),而且页面不会被重新加载

注意
URL:http://b.a.com:88/index.php?name=kang&how=#when=2011#first

search:"?name=kang&how="     第一个"?"之后 ( 经测试应该是:第一个"?"之后 , #之前)
hash:"#when=2011#first"        第一个"#"之后的内容
2,为什么 window.location.search 为空?
答:注意上面的search和hash的区别,如果URL中“?”之前有一个“#”比如:“http://localhost:63342/index.html#/version?type=35&id=5”那么使用window.location.search得到的就是空(“”)。因为“?type=35&id=5”串字符是属于“#/version?type=35&id=5”这个串字符的,也就是说查询字符串search只能在取到“?”后面和“#”之前的内容,如果“#”之前没有“?”search取值为空。
3,应用
复制代码
 1 //获取url参数
 2 function GetQueryString (name)
 3 {
 4     var after = window.location.hash.split("?")[1];
 5     if(after)
 6     {
 7         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
 8         var r = after.match(reg);
 9         if(r != null)
10         {
11             return  decodeURIComponent(r[2]);
12         }
13         else
14         {
15             return null;
16         }
17     }
18 }

目录
相关文章
|
消息中间件 分布式计算 NoSQL
|
JSON 缓存 前端开发
搭建体系的模块依赖关系与 import maps
我是淘系前端搭建服务团队的步天,目前负责建设天马搭建服务和斑马搭建平台,既提供通用的搭建服务,也提供直接可用的搭建产品。
搭建体系的模块依赖关系与 import maps
|
前端开发 JavaScript UED
如何在 React 中实现鼠标悬停显示文本?
如何在 React 中实现鼠标悬停显示文本?
381 0
|
前端开发 JavaScript API
【微前端】single-spa 到底是个什么鬼(下)
说起微前端框架,很多人第一反应就是 single-spa。但是再问深入一点:它是干嘛的,它有什么用,可能就回答不出来了。 一方面没多少人研究和使用微前端。可能还没来得及用微前端扩展项目,公司就已经倒闭了。 另一方面是中文博客对微前端的研究少之又少,很多文章只是简单翻译一下官方文档,读几个API,放个官方的 Demo 就完事了。很少有深入研究到底 single-spa 是怎么一回事的。这篇文章将不会聊怎么搭建一个 Demo,而是会从 “Why” 和 “How” 的角度来聊一下官方文档的都讲了哪些内容,相信看完这篇文章就能看懂 官方的 Demo 了。
【微前端】single-spa 到底是个什么鬼(下)
|
JSON 搜索推荐 前端开发
DingTalk「开发者说」- 酷应用开发之卡片开发和能力套件开放
本篇主要讲解钉钉酷应用中卡片的构造、接口和最佳实践,以及卡片未来的规划和能力套件开放。适用对象:产品经理和有技术背景的开发工程师。
DingTalk「开发者说」- 酷应用开发之卡片开发和能力套件开放
|
机器学习/深度学习 人工智能 算法
带你读《深入理解AutoML和AutoDL:构建自动化机器 学习与深度学习平台》之二:自动化人工智能
本书从理论与实践的双重维度,对AutoML和AutoDL的入门知识和进阶知识做了全面介绍。
|
存储 负载均衡 NoSQL
nginx反向代理做负载均衡以及使用redis实现session共享配置详解
nginx反向代理做负载均衡以及使用redis实现session共享配置详解
626 0
nginx反向代理做负载均衡以及使用redis实现session共享配置详解
|
19天前
|
人工智能 自然语言处理 计算机视觉
Janus-Pro:DeepSeek 开源的多模态模型,支持图像理解和生成
Janus-Pro是DeepSeek推出的一款开源多模态AI模型,支持图像理解和生成,提供1B和7B两种规模,适配多元应用场景。通过改进的训练策略、扩展的数据集和更大规模的模型,显著提升了文本到图像的生成能力和指令跟随性能。
993 19
Janus-Pro:DeepSeek 开源的多模态模型,支持图像理解和生成
|
存储 前端开发 对象存储
一文搞懂Map与Set的用法和区别!
前言 作为前端开发人员,我们最常用的一些数据结构就是 Object、Array 之类的,毕竟它们使用起来非常的方便。往往有些刚入门的同学都会忽视 Set 和 Map 这两种数据结构的存在,因为能用 set 和 map 实现的,基本上也可以使用对象或数组实现,而且还更简单。 但是,存在必然合理,当你真正了解 Map 和 Set 之后,你就会发现它们原来时如此美好!
2332 0
一文搞懂Map与Set的用法和区别!

热门文章

最新文章