原生JS去解析地址栏的链接?超好用的解决办法
在做SPA应用程序的时候,往往需要通过地址栏链接的 hash 值来进行业务逻辑:
<script type="text/javascript">
//file:///C:/Users/Administrator/Desktop/angularjs/domo/20.ng.html#baidu
console.log(window.location);
//结果
//Location {hash: "#baidu", search: "", pathname: "/C:/Users/Administrator/Desktop/angularjs/domo/20.ng.html", port: "", hostname: ""…}
</script>
当页面发生点击,请求发生hash值改变的情况:
<script type='text/javascript' >
(function(window){
window.addEventListener('hashchange',function(e){
//拿到地址栏的地址
console.log(window.location.href);
//拿到地址栏的hash值
console.log(window.location.hash);
var oHash = window.location.hash;
switch(oHash){
case '#/index/':
console.log('index');
case '#case':
console.log('case');
};
});
})(window);
</script>
通过 a 链接的方式通过解析地址栏的URL:
最快捷最方便的方式去解析一个 url 地址,是通过 a 标签的方式去解析
<script type="text/javascript">
/*可以通过 window.location 拿到所有URL的所有信息: -->
//https://www.baidu.com:8080/aaa/1.html?id=10#name
protocol: https
host: www.baidu.com:8080
port: 8080
pathname: /aaa/1.html
search: ?id=10
hash: #name*/
var url = "https://www.baidu.com:8080/aaa/1.html?id=10#name";
var aLink = document.createElement('a');
aLink.href = url;
//打印出一个标签<a href="https://www.baidu.com:8080/aaa/1.html?id=10#name"></a>
//使用json遍历(一定是大写的JSON)
//console.log(JSON.stringify({id:1,name:'张三',age:'18'}));
//打印出 {"id":1,"name":"张三","age":"18"}
//JSON 要求键一定是用双引号引起来,json就是一种用字符串描述对象的方式
console.log(aLink.hostname);
console.log(aLink.port);
console.log(aLink.pathname);
console.log(aLink.search);
console.log(aLink.hash);
</script>
除了 a 标签的解析方法,还有字符串的方法,还有通过正则的方式去解析;
正则表达式:
http://tool.oschina.net/regex
原生JS去解析地址栏的链接?超好用的解决办法的更多相关文章
- Error LNK2001 无法解析的外部符号 的几种情况及解决办法
最近遇到的关于VS里编译出现的“无法解析的外部符号”问题,在网上寻求解决办=办法时查到下面的博客内容,作者讲解的挺全面的,作为收藏以备将来查询. 原文http://blog.csdn.net/shen ...
- Sqlserver通过链接服务器访问Oracle的解决办法
转自http://blog.sina.com.cn/s/blog_614b6f210100t80r.html 一.创建sqlserver链接服务(sqlserver链接oracle) 首先sqlse ...
- 【转】Sqlserver通过链接服务器访问Oracle的解决办法
一.创建sqlserver链接服务(sqlserver链接oracle) 首先sqlserver 链接oracle可以通过两个访问接口: “MSDAORA” 和“OraOLEDB.Oracle” 1 ...
- js的倒计时在ie下显示NAN的最佳解决办法
写了一个倒计时,原代码如下: var times = new Date(); var timesout = new Date("2016-6-7"); var timesg = t ...
- 可以Ping通和DNS解析,但打不开网页的解决办法
一. 网络故障表现为: 1.Ping地址正常,能ping通任何本来就可以ping通地址,如网关.域名. 2.能DNS解析域名. 3.无法打开网页,感觉是网页打开的一瞬间就显示无网络连接. 4.只需要连 ...
- MD5:js,java,C#三种语言加密结果不同解决办法
最近遇到前端js MD5加密与后端C#与Java MD5加密结果不一致的问题,所以写个关于此问题的解决办法 前端js引用的md5类库,类库地址:https://blueimp.github.io/Ja ...
- 原生JS怎样给div添加链接
html: <div href="http://www.atigege.com" target="_blank">个人网站</div> ...
- wordpress修改固定链接及修改链接后链接提示404错误的解决办法
wordpress默认的url实在是不好看又不好记忆,而且还不利于SEO.因此,我就捣鼓着把url做一个自定义.自定义的方式如下: 建议使用/%postname%的形式,这样利于SEO. 修改之后,l ...
- js获取元素属性值为空的原因和解决办法
问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...
随机推荐
- js学习笔记29----拖拽
原理:先计算鼠标与拖拽目标的左侧距离 跟 上面距离,再计算拖动后的位置. 示例代码: <!DOCTYPE html> <html lang="en"> &l ...
- Error -27780: Connection reset by peer: socket write error
Problem Description: Error: "-27780: read to host failed: [10054] Connection reset by peer" ...
- ADC相关参数之---分辨率和精度
ADC的分辨率被定义为输入信号值的最小变化,这个最小数值变化会改变数字输出值的一个数值.对于一个理想ADC来说,传递函数是一个步宽等于分辨率的阶梯.然而,在具有较高分辨率的系统中(≥16位),传输函数 ...
- 关于Cocos2d-x中精灵节点的透明度的设置
1.当我们需要某个精灵作为一个大一点的容器来存放其他的小精灵的时候,我们先设置这个精灵的大小 setTextureRect(Rect(0, 0, babySize.width, babySize.he ...
- 常用HQL(Hibernate Query Language)查询
查询一个对象(实体类必须有一个不带参数的构造方法) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 @Test public void test01() ...
- 【转】【C#】ZIP、RAR 压缩与解压缩
压缩文件夹 源码如下 using System; using System.Data; using System.Configuration; using System.Web; using Syst ...
- MVC演化 (转至http://www.cnblogs.com/wubaiqing/archive/2011/10/26/2225438.html)
MVC已经成为我们最常误用的模式,人们之所以常常误用MVC,很大程度上是因为混淆了不同的MVC变体. Classic MVC Classic MVC 大概上世纪七十年代,Xerox PARC的Tryg ...
- bootstrap table使用指南
Bootstrap table是国人开发的一款基于 Bootstrap 的 jQuery 表格插件,通过简单的设置,就可以拥有强大的单选.多选.排序.分页,以及编辑.导出.过滤(扩展)等等的功能. 目 ...
- 在loadrunner中使用winsocket协议编写脚步三部曲
这两天写了一个winsocket的脚本,没有通过录制的方式,是直接手写的.下面贴出来和大家分享: 脚本的写法很简单,大体说来,就像把大象放进冰箱一样,总共分三步: 第一步:把冰箱门打开. //建立到服 ...
- MVC4 Controller 与 WebApi 的 Session 传值问
在MVC以后,Session方式可能已经不太常用,但偶尔还是会用到,比如页面验证码之类的.例如登录页面使用的验证码通过Controller提供一个View来实现,可以使用Session来存储这个值.但 ...