页面返回上一页浏览位置
程序员文章站
2024-02-01 23:20:06
1.如果上一页是静态页面,可以用 history.go(-1)方法; go() 方法可加载历史列表中的某个具体的页面。 该参数可以是数字,使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。(-1上一个页面,1前进一个页面)。或一个字符串,字符串必须是局部或完整的URL,该函 ......
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]);
}
}
}
})
推荐阅读
-
页面返回上一页浏览位置
-
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数_javascript技巧
-
如何设置Android studio 3.0显示光标返回上一次浏览位置的箭头图标
-
vue scroller返回页面记住滚动位置的实例代码
-
THINKPHP登陆并返回上一页方案(2)
-
为什么在html设置了禁用浏览器缓存,但点前进后退时页面还是 返回 From cache_html/css_WEB-ITnose
-
在IOS系统上滚动条滚动到指定的位置出现空白页面的解决方案
-
Vue keepAlive 数据缓存工具实现返回上一个页面浏览的位置
-
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
-
解决webview调用goBack()返回上一页自动刷新闪白的情况