当浏览器浏览器的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. LuoguP5139 z小f的函数 题解

    Content 给定 \(T\) 个二次函数 \(y=ax^2+bx+c\),有若干次操作,有一个操作编号 \(p\),保证仅为以下这五种: 操作 \(1\):给定 \(k\),将函数图像向上移动 \ ...

  2. java 网络编程基础 UDP协议DatagramSocket,MulticastSocket 实现局域网聊天软件(Server + Client模式)

      开发思路: 服务端两个Socket: UDP的DatagramSocket接收客户端消息. 广播multicastSocket 发送广播消息 客户端一个Socket: multicastSocke ...

  3. 解决H5设置了line-height但并没有居中的问题

    遇到的问题 明明设置了line-height = height,但在H5页面里文字并没有居中. 原因 因为line-height是两条基线之间的距离,当元素高度和font-size差距较大时,会出现不 ...

  4. JAVA发送POST请求携带JSON格式字符串参数

    import org.apache.commons.lang.StringUtils; import org.apache.http.HttpEntity; import org.apache.htt ...

  5. 【LeetCode】107. Binary Tree Level Order Traversal II 解题报告 (Python&C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:DFS 方法二:迭代 日期 [LeetCode ...

  6. 【LeetCode】983. 最低票价 Minimum Cost For Tickets(C++ & Python)

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

  7. 【LeetCode】753. Cracking the Safe 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/cracking ...

  8. 【模型推理】量化实现分享三:详解 ACIQ 对称量化算法实现

      欢迎关注我的公众号 [极智视界],回复001获取Google编程规范   O_o   >_<   o_O   O_o   ~_~   o_O   大家好,我是极智视界,本文剖析一下AC ...

  9. 一文解析Apache Avro数据

    摘要:本文将演示如果序列化生成avro数据,并使用FlinkSQL进行解析. 本文分享自华为云社区<[技术分享]Apache Avro数据的序列化.反序列&&FlinkSQL解析 ...

  10. Vue.js高效前端开发 • 【Vue组件】

    全部章节 >>>> 文章目录 一.Vue组件介绍 1.组件概述 2.组件使用步骤 3.实践练习 一.Vue组件使用 1.组件注册 2.组件注册语法糖 3.使用script或te ...