难题来历
- 记上星期进行了一个微信
H5
的着陆页,因为只有一个网页,并且都是图拼凑而成,全部实施了最原始的 jQuery
书写
- 内部有一些点一下以后跳转外链的需要,因此咯咯写出 :
$('xxx').click(function(){
localtion.href = url // 有埋点,不能使用a连接
})
- 随后返回页面时,有意思的一幕!
手机微信内置浏览器在返回上一页面,且上一页面包括AJAX编码时(埋点必须AJAX)
IOS
默认设置并不是开展页面刷新的,但 android
网页页面便会被强制刷新
- 这样就会发生这两种情况,
ios
微信返回上一页原部位;而 Android
立即精准定位到顶端,弱化了客户体验
试着处理
- 让
Android
在返回页面后定位到原先部位
计划方案①翻转精准定位
- 自动跳转以前纪录当前页的翻转部位,存进
sessionStorage
里边
$.ajax({
type:'POST',
url:`${baseUrl}/app/sta`,
data:{ requestId,type},
success(res){
if(res.code===200){
// 自动跳转之前要先纪录现阶段的翻转部位
sessionStorage.setItem('scrollTop',$('.wrapper').scrollTop());
location.href = hrefUrl
}else{
clearTimeout(timer)
$('.model').stop().fadeIn(1000)
timer = setTimeout(() => {
$('.model').stop().fadeOut(700)
}, 2000);
}
}
})
- 在返回情况下确定是否滚动的部位存不存在,之后直接翻转到相匹配部位,最终消除
sessionStorage
const u = navigator.userAgent
const isAndroid = u.includes('Android') || u.includes('android') || u.includes('Adr')
// 假如是移动设备,且保留了翻转部位
if(isAndroid && sessionStorage.getItem('scrollTop')){
$('.wrapper').scrollTop(Number(sessionStorage.getItem('scrollTop')));
// 消除之前缓存文件
sessionStorage.removeItem('scrollTop');
}
- 但是发现这种做法精准定位压根有误,网页页面每一次点一下去总是会往上面跑,甚至有时差别很大(好几百
px
)
H5
的着陆页,因为只有一个网页,并且都是图拼凑而成,全部实施了最原始的 jQuery
书写$('xxx').click(function(){
localtion.href = url // 有埋点,不能使用a连接
})
手机微信内置浏览器在返回上一页面,且上一页面包括AJAX编码时(埋点必须AJAX)
IOS
默认设置并不是开展页面刷新的,但android
网页页面便会被强制刷新
ios
微信返回上一页原部位;而 Android
立即精准定位到顶端,弱化了客户体验- 让
Android
在返回页面后定位到原先部位
计划方案①翻转精准定位
- 自动跳转以前纪录当前页的翻转部位,存进
sessionStorage
里边
$.ajax({
type:'POST',
url:`${baseUrl}/app/sta`,
data:{ requestId,type},
success(res){
if(res.code===200){
// 自动跳转之前要先纪录现阶段的翻转部位
sessionStorage.setItem('scrollTop',$('.wrapper').scrollTop());
location.href = hrefUrl
}else{
clearTimeout(timer)
$('.model').stop().fadeIn(1000)
timer = setTimeout(() => {
$('.model').stop().fadeOut(700)
}, 2000);
}
}
})
- 在返回情况下确定是否滚动的部位存不存在,之后直接翻转到相匹配部位,最终消除
sessionStorage
const u = navigator.userAgent
const isAndroid = u.includes('Android') || u.includes('android') || u.includes('Adr')
// 假如是移动设备,且保留了翻转部位
if(isAndroid && sessionStorage.getItem('scrollTop')){
$('.wrapper').scrollTop(Number(sessionStorage.getItem('scrollTop')));
// 消除之前缓存文件
sessionStorage.removeItem('scrollTop');
}
- 但是发现这种做法精准定位压根有误,网页页面每一次点一下去总是会往上面跑,甚至有时差别很大(好几百
px
)
- 因为这时候图形的父小盒子相对高度是通过照片展开的,而照片做了懒加载,
- 随后我觉得是否网页页面没送实际相对高度,回到时网页页面未加载完成,无法获取实际相对高度,从而导致定位错误
- 接着给根标签设置了一个
height:4091px
,让html
翻转,用浏览器的确获得到document.documentElement.scrollTop
,可是拿起手机的调试工具vconsloe
,发觉document.documentElement.scrollTop
自始至终为0,并且document.documentElement
是一个空对象 - 并且给跟标签设置了相对高度,初次进入首页就会发现滚动不下去了,多滚动几回才可以
计划方案②锚点定位
- 采用锚点定位的办法,自动跳转之前要先纪录点一下的ps钢笔
$('.reserve').click(function(){
sessionStorage.setItem('anchor', '#knowledge');
...
})
})
- 返回页面时检验存不存在ps钢笔,随后跳转ps钢笔部位
if(isAndroid){
location.href = sessionStorage.getItem('anchor');
// 消除之前缓存文件
sessionStorage.removeItem('anchor');
}
- 这么做算不上定位到原部位,可是回到以后能让用户见到点一下的地区,可以说是优化体验
- 但这样等同于回到原网页页面以后做了一次自动跳转
- 从 http://127.0.0.1:5502/index.html 跳转 http://127.0.0.1:5502/index.html#knowledge
- 因此电脑浏览器存有了两条历史数据,移动设备点一下物理学返回键时,是从带
#knowledge
页面回到没有页面,等同于必须点一下2次才可以退出页面,存在的问题
计划方案③scrollIntoView
- 翻转元素父器皿,使被启用
scrollIntoView()
元素对消费者由此可见 - 性能和ps钢笔类似,仅仅不容易电脑浏览器不会造成纪录
- 点一下前仍旧储存点一下区域的ps钢笔
if(isAndroid){
$(sessionStorage.getItem('anchor'))[0].scrollIntoView()
// 消除之前缓存文件
sessionStorage.removeItem('anchor');
}
可选参数
-
alignToTop
(布尔值):- 假如为
true
,原素的顶端将与其所在翻转区域可视性地区的顶端两端对齐 - 假如为
false
,元素底部将与其所在翻转区域可视性区域内的底部两端对齐
- 假如为
-
scrollIntoViewOptions
(目标):- behavior: 界定动漫过渡效果,
auto
或smooth
之一,默认auto
- block: 界定竖直方向的两端对齐,
start
,center
,end
,或nearest
之一,默认start
- inline: 界定垂直方向的两端对齐,
start
,center
,end
,或nearest
之一,默认nearest
- behavior: 界定动漫过渡效果,
留意:
alignToTop
为true
等同于scrollIntoViewOptions:{block:"start", inline:"nearest"}
alignToTop
为false
等同于scrollIntoViewOptions:{block: "end", inline: "nearest"}
兼容模式
- 苹果浏览器兼容问题,可是不需要考虑
分辨页面加载种类
- 精准定位早已处理,但是还是有一个问题!
- 如果用户跳至外链后,立即将整个网页页面或微信关闭,而非回到首页,那样记载的ps钢笔也不会被消除
- 那样下一次进入首页时,就可能会跳转相对应的部位,存有
bug
- 这个时候就需要做一次分辨,判断出以什么方式进入首页的 (直接进 or 返回)
$(document).ready(function (){
window.historyPageMark = false; // 标识是否属于历史时间网页页面
// 监视pageshow事情,网页页面表明则开启
function onPageBack(callback){
$(window).on("pageshow",e => {
if(window.historyPageMark === true || e.persisted || isEnterByBack()){
// 假如是历史时间网页页面,则开启调整
callback();
}
window.historyPageMark = true; // 初次pageshow实行后升级标记为历史时间网页页面
})
}
function isEnterByBack(){ // 分辨网页页面进到种类是否属于返回
if(!window.performance) return false;
if(window.performance.getEntriesByType("navigation")[0]){
return window.performance.getEntriesByType("navigation")[0].type === "back_forward";
}
if(window.performance.navigation){
return window.performance.navigation.type === 2;
}
return false;
}
})
-
window.performance: 用以精确测量网页页面和 Web 应用软件性能
-
window.performance.getEntriesByType(): 回到一个 PerformanceEntry
对象二维数组
-
window.performance.getEntriesByType("navigation")[0] :一般用于监管网页页面性能
- 在其中type特性有两种值,
reload
表明轻载,back_forward
表明返回
bug
$(document).ready(function (){
window.historyPageMark = false; // 标识是否属于历史时间网页页面
// 监视pageshow事情,网页页面表明则开启
function onPageBack(callback){
$(window).on("pageshow",e => {
if(window.historyPageMark === true || e.persisted || isEnterByBack()){
// 假如是历史时间网页页面,则开启调整
callback();
}
window.historyPageMark = true; // 初次pageshow实行后升级标记为历史时间网页页面
})
}
function isEnterByBack(){ // 分辨网页页面进到种类是否属于返回
if(!window.performance) return false;
if(window.performance.getEntriesByType("navigation")[0]){
return window.performance.getEntriesByType("navigation")[0].type === "back_forward";
}
if(window.performance.navigation){
return window.performance.navigation.type === 2;
}
return false;
}
})
window.performance: 用以精确测量网页页面和 Web 应用软件性能
window.performance.getEntriesByType(): 回到一个 PerformanceEntry
对象二维数组
window.performance.getEntriesByType("navigation")[0] :一般用于监管网页页面性能
- 在其中type特性有两种值,
reload
表明轻载,back_forward
表明返回
声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你