关于javascript:H5页面在IOS微信中跳转时会出现底部工具栏遮挡页面底部内容

问题形容：
在IOS微信中关上H5页面，当浏览器内呈现跳转产生url历史记录时，页面底部会呈现一个带有后退和后退按钮的工具栏，会遮挡页面底部的内容。

剖析起因：
页面跳转时，微信浏览器通过window.history读取到浏览的历史记录，此时便会在页面底部显示出后退后退按钮的工具栏，造成页面底部内容遮挡。但刷新一下该页面，就不会遮挡了。底部的工具栏是在页面实现渲染之后才渲染的。

解决方案：

不产生历史记录让底部工具栏不呈现

因为未受权代码无奈革除会话历史（session History），也不能禁用回退/后退性能。最快捷的可用形式是使location.replace()办法，提供指定的URL来替换以后的会话历史（session history）。

1. 用replace代替push指第一个页面到第二个页面push->replace，其余页面不变。

   理论应有中IOS跳转利用商店应用的是两头页和tencent/camp-launch-app的插件，应用的是window.location.href = url跳转，未采纳。

2. 在第一个界面产生历史记录：能够在跳转到第一个页背后再加一个页面，此页面不须要内容间接跳转即可。

   在理论利用中在第一个页面产生历史记录不是最优解决方案，未采纳。

3. 在页面加载之前通过被动增加空的历史记录，触发浏览器的history监听机制，让浏览器先于页面调出底部工具栏，从而解决遮挡问题。

   在路由守卫中减少对 window.history 的解决：

router.beforeEach((to, from, next) => {    window.history.replaceState(null, null, window.location.href);    next();});

replaceState 是替换浏览历史中的上一条记录，用以后页面的地址替换上一条记录，实质上浏览历史是不变的。
经测试仅IOS 6 Plus失效。

起因：IOS微信中调整到下一页面后并未将上一页面批改的url放弃在历史记录中。
eg: 返回上一页并未返回到 http://www.a.com?time=xxx，而... http://www.a.com 中。

底部工具栏呈现后，再获取页面高度或从新定位

IOS底部导航栏呈现会导致页面高度扭转，能够利用onresize监听页面大小变动，在高度扭转后从新设置非正常布局流元素即可解决。

function resizeHeight(e, delay = 200){ // delay = 200ms仅供参考，若还呈现问题可减少时间延迟    let resizeTimeout;    if (!resizeTimeout) {        resizeTimeout = setTimeout(function() {            resizeTimeout = null;            let navBar = document.getElementsByClassName("component-tab-bar-box")[0]; //此类即为非正常布局流元素            let bottom = navBar.style.bottom;            navBar.style.bottom = parseInt(bottom) ? 0 : 1 + 'px';        }, delay);    }}window.onresize = resizeHeight;

但delay工夫不好确定，未采纳。

在IOS微信中通过pageshow事件决定是否须要刷新页面

H5页面在IOS微信内置浏览器中点击返回按钮返回上一页时，上一页面不会被刷新。在浏览器缓存机制中，在返回上一页的操作中， html/js/css/接口等动动态资源不会从新申请，然而js会从新加载。但在IOS微信页面中js也会保留上一页面最初执行的状态，不会从新执行js。

浏览器后退/后退缓存(Backward/Forward Cache，简称BF Cache)是一种浏览器优化，HTML规范并未指定其如何进行缓存，因而缓存行为是各浏览器实现不尽相同。

pageshow：当一条会话历史记录被执行的时候将会触发页面显示(pageshow)事件。(这包含了后退/后退按钮操作，同时也会在onload 事件触发后初始化页面时触发)。

window.addEventListener('pageshow', function(event) {    // event.persisted: Boolean类型，示意网页是否是来自缓存。});

pageshow兼容性：

performance.navigation的type值为2，页面通过历史记录和后退后退拜访时。
即：window.performance.navigation.type === 2

performance.navigation兼容性：

if (isWxH5 && Utils.isIos()) {    window.onpageshow = function(e) {        if(e.persisted || (window.performance && window.performance.navigation.type == 2)) {            window.location.reload()        }    }}

pageShow事件在页面显示即会触发，无论页面是否来自BF Cache。通过检测persisted属性即可判断是否存在 BF Cache 行为。IOS中的微信页面，反对pageShow办法、persisted属性以及performance.navigation属性。

参考文章：

1. IOS微信下问题1 底部导航栏导致标签地位偏移
2. iOS新版微信底部工具栏遮挡问题完满解决
3. Ios中微信页面返回上一页去除缓存几种常见思路
4. iOS设施 微信h5页面回退 内容不刷新的问题
5. iOS微信底部返回横条问题
6. h5返回到上一页ios手机页面不刷新
7. 微信页面入口文件被缓存解决方案