html页面实现返回上一页浏览位置使用帮助_页面菜鸟教程网

1.如果上一页是静态页面,可以用 history.go(-1)方法;go() 方法可加载历史列表中的某个具体的页面。该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。该方法返回上一页,不刷新页面,但

html页面实现返回上一页浏览位置使用帮助

1.如果上一页是静态页面,可以用 history.go(-1)方法;

html页面实现返回上一页浏览位置使用帮助_页面菜鸟教程网

go() 方法可加载历史列表中的某个具体的页面。该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函数会去匹配字符串的第一个URL。该方法返回上一页,不刷新页面,但是会执行js;

例子:

<a href="javascript:;" onclick="javascript:history.go(-1);">Back</a>

点击back 页面就会返回上一个页面的浏览位置

2.我在工作中遇到的,页面采用了vue,页面每次加载都会去请求数据,用history.go(-1)方法返回上一页,上一页的页面因为重新请求数据,页面不会定位到上次浏览的位置;

解决思路:使用onbeforeunload(事件在即将离开当前页面(刷新或关闭)时触发)方法在页面离开时把滚动条位置和页面文本高度放到cookie中,当页面刷新或重新加载时取出滚动条位置和页面文本高度,设置到页面。

代码如下:

window.onbeforeunload = function () {
    var scrollPos, height;
    if (typeof window.pageYOffset != 'undefined') {
        scrollPos = window.pageYOffset;
    } else if (typeof document.compatMode != 'undefined' &&
        document.compatMode != 'BackCompat') {
        scrollPos = document.documentElement.scrollTop;
    } else if (typeof document.body != 'undefined') {
        scrollPos = document.body.scrollTop;

    }
    height = document.body.scrollHeight;
    document.cookie = "scrollTop=" + scrollPos; //存储滚动条位置到cookies中
    document.cookie = "height=" + height; //存储滚动条位置到cookies中
}
new Vue({
  el:'#app',
  
  updated: function () {
      var height;
      //获取之前的页面高度
      if (document.cookie.match(/height=([^;]+)(;|$)/) != null) {
          var arr = document.cookie.match(/height=([^;]+)(;|$)/); //cookies中不为空,则读取页面高度
          height = parseInt(arr[1]);
      }
      //获取之前的滚动条位置
      if (document.body.scrollHeight == height) {
          if (document.cookie.match(/scrollTop=([^;]+)(;|$)/) != null) {
              var arr = document.cookie.match(/scrollTop=([^;]+)(;|$)/); //cookies中不为空,则读取滚动条位置
              document.documentElement.scrollTop = parseInt(arr[1]);
              document.body.scrollTop = parseInt(arr[1]);
          }
      }
  }
})

1

海计划公众号
(0)
上一篇 2020/03/29 01:44
下一篇 2020/03/29 01:44

您可能感兴趣的内容

  • JS声明对象时属性名加引号与不加引号的问题使用说明_对象使用帮助

    一般情况下属性名加引号和不加引号是都可以的,效果是一样的。var obj = { name : ‘你好’, ‘age’ : 1,
    }; document.write( obj[‘name’] + ‘
    ‘ );
    document.write( obj.age);上面两行代码均可以正确执行。当且仅当你的属性名是非法怪异的名字时候

    2020/04/05
  • js事件委托入门基础_事件入门百科

    js事件委托入门基础 今天呢,咱们来说说事件委托,有的相关资料叫事件代理.首先呢,先来讲讲事件委托的起源:由于事件处理程序可以为web应用提供交互能力,因此很多开发人员会不分青红皂…

    2020/03/20
  • 测试工具比较:选Jest,不选Mocha小白教程_测试指南教程

    我们Automattic公司的WordPress.com是由Calypso项目推动的,而这个项目中所有的测试用的都是Mocha框架。项目中还包括端到端测试,都保存在自己独立的代码库里。这套设定我们已经用了三年多了,我觉得是时候该重新审查一下这个选择。我发现这篇[单元测试工具的比较]文章(https://mo.github.io/2017/06/05/java

    2020/04/06
  • iframe父子传参通信入门基础知识_iframe菜鸟知识

    在最近的项目里面,用到了不少关于iframe父子传参通信的相关操作,记录一下,虽然很简单,但是确实十分有用的;iframe通信可以分为2种,跨域和非跨域两种.分别说明;有一点很重要,iframe是可以给name 属性的;给上name 属性可以省下一些代码;非跨域 父调子//父页面

    <i

    2020/03/20
  • uppy基础知识教程_模块化文件上传组件

    uppy基础知识教程 官方网址:https://uppy.io GitHub:https://github.com/transloadit/uppy 简介描述:模块化文件上传组件 …

    2020/03/06
  • rrule.js使用帮助_用来处理递归规则日历日期的JavaScript库

    rrule.js使用帮助 官方网址:https://jakubroztocil.github.io/rrule GitHub:https://github.com/jakubroz…

    2020/03/11
  • WebIDE小白攻略 Coding 自主研发的在线集成开发环境 (IDE)

    WebIDE小白入门 官方网址:https://ide.coding.net/ 简介描述: Coding 自主研发的在线集成开发环境 (IDE) Coding WebIDE 是 C…

    2020/03/06
  • Js职责链模式零基础入门_模式使用教程

    定义: 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系,将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止也就是说,请求以后,从第一个对象开始,链中收到请求的对象要么亲自处理它,要么转发给链中的下一个候选者。提交请求的对象并不明确知道哪一个对象将会处理它——也就是该请求有一个隐式的接受者(implicit rece

    2020/03/30
  • liunx如何重启nodejs?入门攻略_liunx入门教程

    想要重启node server 进入相应的项目执行npm stop发现没用 server仍然在,于是要杀掉相应进程。使用命令启动和停止node:1、ps -ef | grep node查看node对应的pid,然后kill pid,再进入对应项目,使用npm start2、如果以上方法不行可以这样:kill node 或者kilall node使用脚本启动和

    2020/03/24
  • Vue3.0 响应式数据入门攻略_响应式攻略教程

    “别再更新了,实在是学不动了”这句话道出了多少前端开发者的心声,”不幸”的是 Vue 的作者在国庆区间发布了 Vue3.0 的 pre-Aplha 版本,这意味着 Vue3.0 快要和我们见面了。既来之则安之,扶我起来我要开始讲了。Vue3.0 为了达到更快、更小、更易于维护、更贴近原生、对开发者更友好的目的,在很多方面进行了重构:使用 Typescript

    2020/03/23
  • JS箭头函数用处/示例指南教程_函数入门基础

    在现代JS中最让人期待的特性就是关于箭头函数,用=>来标识。箭头函数有两个主要的优点:更简短的函数;更直观的作用域和this的绑定(不绑定this)因为这些优点,箭头函数比起其他形式的函数声明更受欢迎。比如,受欢迎的airbnb eslint configuration库会强制使用JavaScript箭头函数创建匿名函数。然而,箭头函数有优点,也有一些“缺点

    2020/03/29
  • 开发Web应用,Go语言比Python更有优势!小白帮助_应用菜鸟知识

    随着Golang的日益普及,它是否取代Python?接下来让我们一起看看Go的优点,以及它与Python的区别。在Web开发的世界里,敏捷才是王道。使用更少的费用和资源来更快地完成网站和网络应用,从而获得更多的竞争优势。此外,他们不仅希望快速完成Web开发,对可用性和用户体验的要求也很高。这需要开发更多的功能和高级编程语言来开发网站功能,例如Golang。本

    2020/03/20
  • 关于export和export default你不知道的事小白入门_模块小白帮助

    网上有很多关于export和export default的文章,他们大部门都是只讲了用法,但是没有提到性能,打包等关键的东西。
    大家应该应该能理解import * from ‘xxx’会把文件中export default的内容都打包到文件中,而import {func} from ‘xxx’ 只会把文件中的func导入,这样势必export会比export

    2020/03/30
  • CJSS入门基础_一个基于 CSS 的 Web 框架

    CJSS入门基础 官方网址:https://cjss.js.org/ GitHub:https://github.com/cjss-group/CJSS 简介描述:一个基于 CSS…

    2020/03/12
  • 前端初学者们4点建议,面试时应该关注哪些小白知识_前端小白教程

    现在的前端技术的发展日新月异,各种新技术层出不穷。前后端分离的开发模式也让前端开发者的地位日益提升,待遇日渐水涨船高,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图。但一个残酷的现实是 市场上从不缺少初级前端开发,稀缺的的永远是高级前端开发 。物以稀为贵,一名高级前端开发的薪资是初级前端得好几倍,扎心的是初级前端往往还要担心失业的风险,而高级

    2020/03/26
  • graphql-editor基础指南_GraphQL的可视节点编辑器

    graphql-editor基础指南 官方网址:https://graphqleditor.com/ GitHub:https://github.com/graphql-edito…

    2020/03/10