当浏览器浏览器的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. IDEA 2021.2.1 破解版下载_激活安装图文教程(永久激活,亲测有效)

    1.IntelliJ IDEA 2021 链接:https://pan.baidu.com/s/1Pwz3GrrkJdDZzg-wg5UjMw 提取码:56o6 无限重置 30 天试用期补丁 链接:h ...

  2. Python语言的2个典型特性

    [动态编程语言] 学习过C.C++的同学都知道,使用这二者编写代码时,变量在使用前必须通过类似"int a=123"的语句提取申明,然后在真正赋值的时候校验取值跟类型是否相符.也就 ...

  3. SSM——Spring框架

    Spring概念 什么是Spring Spring两大核心 1.IOC 所谓的IOC称之为控制反转,简单来说就是将对象的创建的权利及对象的生命周期的管理过程交由Spring框架来处理,从此在开发过程中 ...

  4. 【LeetCode】1101. The Earliest Moment When Everyone Become Friends 解题报告 (C++)

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

  5. 【LeetCode】457. Circular Array Loop 环形数组是否存在循环 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题思路 快慢指针 代码 日期 题目地址:https://le ...

  6. 【九度OJ】题目1181:遍历链表 解题报告

    [九度OJ]题目1181:遍历链表 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1181 题目描述: 建立一个升序链表并遍历输出. ...

  7. 【LeetCode】35. Search Insert Position 解题报告(Java & Python)

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

  8. 【LeetCode】503. Next Greater Element II 解题报告(Python & C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 暴力解法 单调递减栈 日期 题目地址:https:/ ...

  9. 在线编辑Word——插入图片、图形

    在Word中支持插入图片.图形等元素,同时支持对插入的图片和图形进行格式化操作,如裁剪.调整尺寸大小.调成颜色.阴影.倾斜角度.透明度等等.本文,将通过使用Spire.Cloud Word在线编辑器来 ...

  10. 离线版centos8安装docker笔记

    嗨嗨哈哈,已经很久没有坐下来胡编乱造一点笔记了,平时云服务器搞惯了,一个命令就安装好了docker了的,但这次生不逢时的新机房就没那么幸运了,有多不逢时超乎想象,不仅仅服务器没有外网,就连周围方圆一公 ...