zoukankan      html  css  js  c++  java
  • 页面返回上一页浏览位置

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

      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]);
      }
      }
      }

    })


  • 相关阅读:
    Element没更新了?Element没更新,基于El的扩展库更新
    MVC与Validate验证提示的样式修改
    封装两个简单的Jquery组件
    VS20XX-Add-In插件开发
    CentOS7 配置环境
    PHP Laravel 5.4 环境搭建
    【设计经验】5、Verilog对数据进行四舍五入(round)与饱和(saturation)截位
    【设计经验】4、SERDES关键技术总结
    【高速接口-RapidIO】6、Xilinx RapidIO核仿真与包时序分析
    【高速接口-RapidIO】5、Xilinx RapidIO核例子工程源码分析
  • 原文地址:https://www.cnblogs.com/yuanqt/p/11125913.html
Copyright © 2011-2022 走看看