在做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去解析地址栏的链接?超好用的解决办法的更多相关文章

  1. Error LNK2001 无法解析的外部符号 的几种情况及解决办法

    最近遇到的关于VS里编译出现的“无法解析的外部符号”问题,在网上寻求解决办=办法时查到下面的博客内容,作者讲解的挺全面的,作为收藏以备将来查询. 原文http://blog.csdn.net/shen ...

  2. Sqlserver通过链接服务器访问Oracle的解决办法

    转自http://blog.sina.com.cn/s/blog_614b6f210100t80r.html 一.创建sqlserver链接服务(sqlserver链接oracle)  首先sqlse ...

  3. 【转】Sqlserver通过链接服务器访问Oracle的解决办法

    一.创建sqlserver链接服务(sqlserver链接oracle)  首先sqlserver 链接oracle可以通过两个访问接口: “MSDAORA” 和“OraOLEDB.Oracle” 1 ...

  4. js的倒计时在ie下显示NAN的最佳解决办法

    写了一个倒计时,原代码如下: var times = new Date(); var timesout = new Date("2016-6-7"); var timesg = t ...

  5. 可以Ping通和DNS解析,但打不开网页的解决办法

    一. 网络故障表现为: 1.Ping地址正常,能ping通任何本来就可以ping通地址,如网关.域名. 2.能DNS解析域名. 3.无法打开网页,感觉是网页打开的一瞬间就显示无网络连接. 4.只需要连 ...

  6. MD5:js,java,C#三种语言加密结果不同解决办法

    最近遇到前端js MD5加密与后端C#与Java MD5加密结果不一致的问题,所以写个关于此问题的解决办法 前端js引用的md5类库,类库地址:https://blueimp.github.io/Ja ...

  7. 原生JS怎样给div添加链接

    html: <div href="http://www.atigege.com" target="_blank">个人网站</div> ...

  8. wordpress修改固定链接及修改链接后链接提示404错误的解决办法

    wordpress默认的url实在是不好看又不好记忆,而且还不利于SEO.因此,我就捣鼓着把url做一个自定义.自定义的方式如下: 建议使用/%postname%的形式,这样利于SEO. 修改之后,l ...

  9. js获取元素属性值为空的原因和解决办法

    问题描述:js获取某元素的属性值为空 代码: <!-- css定义在head中 --> <style> #box{ width: 100px; height: 100px; b ...

随机推荐

  1. [JS] selector 背景选择器

    用于listview和button改变android原来控件的背景 android的selector是在drawable/xxx.xml中配置的 1.定义xml 把下面的XML文件保存成你自己命名的. ...

  2. LVS学习笔记及总结(思维导图版)

    转自: http://www.07net01.com/2015/10/944377.html 下图是我在跟随马哥的脚步学习LVS过程中的学习笔记,以此为蓝本总结的,若有不足之处请谅解!

  3. C# 在Bitmap上绘制文字出现锯齿的问题

    解决锯齿问题主要是修改Graphics的属性 修复绘制图片锯齿问题可以修改 g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiA ...

  4. CleanMyMac 4破解版-最强中文版_破解版_激活码_注册码

    最新版CleanMyMac 4中文版本已经发布了,也受到了广大用户的喜爱.众所周知, 注册码是开启软件的钥匙,在获取软件安装包之后需要有效的注册码才能激活软件.但是关于CleanMyMac 4注册码的 ...

  5. PHP中如何获取网站根目录物理路径

    在php程序开发中经常需要获取当前网站的目录,我们可以通过常量定义获取站点根目录物理路径,方便在程序中使用. 下面介绍几种常用的获取网站根目录的方法. php获取网站根目录方法一: <?php ...

  6. CentOS 6.5配置SSH免密码登录

    centos 系统对权限的设置非常微妙,如果权限设置大了则ssh 拒绝,如果权限小了,则ssh 更是被拒绝(我曾经配置好久没有打通,就是因为权限过大的原因) 参考链接:http://www.linux ...

  7. Solr学习之一 --------环境搭建

    一.准备工具 下载Solr,以目前最新版solr-6.1.0为例 准备servlet容器,Tomcat,Jetty,Resin之类.以Tomcat7为例   二.开始动手 将solr解压出来,在sol ...

  8. 用MathType怎么编辑带圈数字序号

    在用MathType编辑公式时,涉及到的数学公式与符号这些都能编辑出来,只要你能够细心一点找到它们相应的模板,不管是在word公式编辑器MathType工具栏模板中,还是在插入符号之后的面板中都可以. ...

  9. 在工程名.h头文件中写public:

    class CaccessimageApp : public CWinApp { public: _ConnectionPtr m_pConnection; CaccessimageApp(); // ...

  10. linux vi编辑器中,如何通过快捷键上下翻页?

    需求说明: 之前在vi的时候,如果想看下一页,就直接按住 ↓ 这个箭头一直翻,现在觉得有些麻烦, 就找了下上,下翻页的快捷方式.在此记录下. 记录: 1.向下翻页快捷键(下一页):Ctrl + f 2 ...