当浏览器浏览器的url进行变化时,浏览器默认是会去服务器将相应的资源给请求下来的,在不阻止默认行为的前提下,使用给url加锚点的方式(hash模式),让浏览器不跳转。

    window.addEventListener('hashchange',()=>{
const value = location.hash
console.log(value)
switch(){
//对应操作
} })

js监听url的hash变化和获取hash值的更多相关文章

  1. js监听文本框内容变化

    js监听文本框内容变化 原理很简单,就是在外部先声明一个用来记录input值的变量,然后每0.1秒比较这个值与input的值,如果发生改变,则运行自己的代码,同时改变变量.从而实现对input值改变的 ...

  2. js监听某个元素高度变化来改变父级iframe的高度

    最近需要做一个iframe调用其他页面内容,这个iframe地址是可变化的,但是里面的内容高度不确定且里面内容高度可调整,所以需要通过监听iframe里面body的高度变化来调整iframe的高度. ...

  3. js监听input输入字符变化

    <p class="text-input"> <input type="text" id="username" autoC ...

  4. js监听屏幕的高度变化

    之前用VUE写完一个聊天界面,对于ios的效果该优化的地方都已经优化,且已上线.现在因项目需要,在另外一个angularjs+ionic的框架也要写一个聊天页面,目前还在开发中,发现忘记了一些很关键的 ...

  5. JS监听input框的回车事件、属性值改变事件

    一.介绍 在程序猿门的工作中,经常会遇见一些表单数据的提交,对于有表单的东西而言,input输入框是非常常见的,所以对于一些input的基本事件,我们需要去掌握 二.input的监听enter事件 比 ...

  6. angular6 监听url查询参数变化刷新页面

    快照snapshot取到的参数是组件第一次渲染时候的参数,当我们在页面中需要根据不同的url查询参数显示不同的内容时,快照就不能满足我们的需要了,这时候就要用ActivatedRoute服务的quer ...

  7. js监听textarea 内容的变化,并计算内容的长度c

    html代码如下:   <div class="customer-message">   <label for="customerMessage&quo ...

  8. js监听dom元素内容变化

    $("#divid").bind('DOMNodeInserted', function(e) { alert('element now contains: ' + $(e.tar ...

  9. js -- 监听窗口的大小变化

随机推荐

  1. ORM-数据库命令操作包装实例对象学习

    http://www.cnblogs.com/alex3714/articles/5978329.html python 之路,Day11 - sqlalchemy ORM   本节内容 ORM介绍 ...

  2. 如何把Electron做成一个Runtime,让多个应用共享同一个Electron

    这个问题涉及到很多知识,而且要想把这个Runtime做好很绕. 下面我就说一下我的思路:(以下内容以Windows平台为基础,Mac平台和Linux平台还得去调查一下,才能确定是否可行) 首先,我们先 ...

  3. IDEA把Main方法打包成jar包

    创建一个maven项目 写一个main方法 Module:选择main方法所在的模块,我这里只有一个模块 所以默认选中 Main Class:选择main方法所在的类 Directory for ME ...

  4. JS将时间戳转换为日期格式

    function getDate(time){ var date =(new Date(parseInt(time))).toLocaleDateString() return date; } tim ...

  5. SpringBoot整合Elasticsearch启动报错处理 nested exception is java.lang.IllegalStateException: availableProcessors is already set to [8], rejecting [8]

    Caused by: org.springframework.beans.factory.UnsatisfiedDependencyException: Error creating bean wit ...

  6. 【LeetCode】169. Majority Element 解题报告(Java & Python & C+)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 思路 hashmap统计次数 摩尔投票法 Moore ...

  7. 【LeetCode】1041. Robot Bounded In Circle 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 找规律 日期 题目地址:https://leetco ...

  8. 【九度OJ】题目1175:打牌 解题报告

    [九度OJ]题目1175:打牌 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1175 题目描述: 牌只有1到9,手里拿着已经排好序的 ...

  9. 【LeetCode】853. Car Fleet 解题报告(Python)

    [LeetCode]853. Car Fleet 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxu ...

  10. 主流的 API 架构

    1. RPC:调用另一个系统的函数 2. SOAP:使数据作为服务可用 3. REST:使数据作为资源可用 4. GraphQL:仅请求所需要的数据 1. RPC:调用另一个系统的函数 远程过程调用是 ...