IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案 -> 正文阅读

[JavaScript知识库]实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案

一、前言
如果要实现页面操作不刷新网站,并且可以在浏览器中进行前进和后退操作,此时我们存在两个方法,一个是通过url的hash值操作,另一个是通过HTML5的history方法。下面我们将详细讲解这两个方法。
二、url的hash方法
在这里插入图片描述
在url中设置锚点,此时不会发生刷新效果,此时我们可以监听url的hash值的改变,然后进行请求数据,然后渲染页面即可,此时也是可以实现浏览器前进后退不刷新页面的效果的。
在这里插入图片描述
如上图所示,此时我们当点击a链接时,此时改变urlhash值,此时我们可以通过监听urlhashchange方法,来执行相应的函数。
优点:hash值方法优势是兼容性好,在老版本的ie中可以运行,但是存在一个缺陷,就是存在#,显得url地址不真实。
三、HTML5的history api
html5中存在一些api,可以实现改变地址url但是不刷新页面。
此时如果我们不使用html5中的api,直接进行a链接切换页面,此时会进行刷新。
在这里插入图片描述
如下图所示,此时对上面的标签设置相关的事件,执行相关的函数。
在这里插入图片描述
这里的e.preventDefault()表示阻止默认事件。然后通过history api中的pushstate将内容放入其中。
如果想要切换服务器数据,并且达到无刷新,可以在popstate监听函数中和a连接点击时触发ajax向服务器发起请求
三、history 的 6个api总结
replaceState:替换原来的路径。
pushState:使用新的路径。
popState:路径回退。
go:向前或者向后。
back:向后改变路径。
forward:向前改变路径。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-02-19 01:03:52  更:2022-02-19 01:04:11 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 11:14:18-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码