手机微信内置浏览器在返回页面后定位到原先部位计划方案

难题来历

• 记上星期进行了一个微信 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

留意：

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 表明返回