当浏览器浏览器的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. AtCoder Beginner Contest 169 题解

    AtCoder Beginner Contest 169 题解 这场比赛比较简单,证明我没有咕咕咕的时候到了! A - Multiplication 1 没什么好说的,直接读入两个数输出乘积就好了. ...

  2. redis pipeset发布订阅

    #!/usr/bin/env python # Author:Zhangmingda import redis,time pool = redis.ConnectionPool(host='192.1 ...

  3. Photoshop学习笔记(一)

    1.Alt+delete,用前景色填充选区 2.按住shift键可以新加选区 3.按住alt键可以减去选区 4.第一次选择选区时按住shift键制作出正方形或者圆形 5.第一次选择选区时按住alt键将 ...

  4. MyBatis学习(三)MyBatis基于动态代理方式的增删改查

    1.前言 上一期讲到MyBatis-Statement版本的增删改查.可以发现.这种代码写下来冗余的地方特别多.写一套没啥.如果涉及到多表多查询的时候就容易出现问题.故.官方推荐了一种方法.即MyBa ...

  5. C++使用C语言库函数创建文件夹

    概述 本文演示环境: win10 + vs2017 头文件 #include <io.h> #include <direct.h> 函数 下面的函数,从左至右依次检查文件夹是否 ...

  6. Android中Log信息的输出方法

    第一步:在对应的mk文件中加入:LOCAL_LDLIBS:= -llog第二步:在要使用LOG的cpp文件中加入:#include <android/log.h>#define LOGD( ...

  7. nim_duilib(15)之duilib属性列表.xml

    Note 为了更加方便查看duilib的属性(github有时候打不开),特此记录. 阅读本文,可以知道控件有哪些属性,可以写在xml文件中.个别需要结合源码一起看 from here 原文 < ...

  8. ubuntu下载源码clang + llvm+lldb 编译+安装

    [本文可能涉及到Ubuntu安装以下工具:] A.g++ B.gcc C.make D.cmake E.clang(10.0.1)(必须) F.llvm(10.0.1)(必须) G.lldb(10.0 ...

  9. 【九度OJ】题目1192:回文字符串 解题报告

    [九度OJ]题目1192:回文字符串 解题报告 标签(空格分隔): 九度OJ http://ac.jobdu.com/problem.php?pid=1192 题目描述: 给出一个长度不超过1000的 ...

  10. 【LeetCode】784. Letter Case Permutation 解题报告 (Python&C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 回溯法 循环 日期 题目地址:https://leet ...