js 中 url 传参
Location 属性
操作 |
代码 |
输出结果 |
获取 # 号后面的字符串 |
window.location.hash |
#/lingshoustatis/?starttime=2018-11-21&&endtime=2018-11-21 |
获取 url 协议部分 |
window.location.protocol |
http: |
获取 href 属性中 ‘?’后的部分,又称为查询字选集串 |
window.location.search |
"?name=kang&when=2011" |
获取端口号 |
window.location.port |
8000 |
获取整个 url 字符串 |
window.location.href |
http://localhost:8000/bui/#/lingshoustatis/?starttime=2018-11-21&&endtime=2018-11-21 |
获取对象指定文件名或者路径 |
window.location.pathname |
/bui/ |
获取 location 或 URL 的 hostname 和 port 号码 |
window.location.host |
localhost:8000 |
获取 URL 方法
function GetQueryString(name){ var after = window.location.hash.split("?")[1]; if(after){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = after.match(reg); if(r != null){ return decodeURIComponent(r[2]); } else { return null; } } } |
decodeURIComponent() 函数 是对url 进行解析
unescape() 函数可对通过 escape() 编码的字符串进行解码。
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" 第一个"#"之后的内容
为什么有时候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取值为空。
应用1:链接带参跳转(react中操作)
A 页面:
'1': `lingshoustatis/?starttime=${this.state.starttime}&&endtime=${this.state.endtime}`,
B页面:
调用 GetQueryString 方法,然后传值,要和 A 页面上的 参数名相对应该,
如下操作:
var a = GetQueryString('starttime');
var b = GetQueryString('endtime')
应用1:链接中跳转到 tabs 页面的第二个(react中操作)
A页面:
B页面:
步骤:进来页面接收 name,保存name值到state里,然后 设置tabs 的 activeKey 属性 ,** 那个你需要展示的tab标签 。
1、在生命周期 ComponentDidMount 中获取浏览器上的参数。
decodeURIComponent(window.location.hash.match(/name=(\w+)/g)).match(/=(\w+)/)[1]
2、因为 tabs 有三个页面。每个页面都有一个 key 值,在 Tabs 上加属性 activeKey={key} 。** 那个你需要展示的tab标签
<Tabs onChange={this.callback} className='task' activeKey={key} tabBarExtraContent={operations}>
<TabPane tab=“第一个页面" key="1"></TabPane>
<TabPane tab=“第二个页面" key="2"></TabPane>
<TabPane tab=“第三个页面" key="3"></TabPane>
</Tabs>