html页面跳转先显示底部,H5页面在IOS微信中跳转时，会出现底部工具栏，遮挡页面底部内容...

问题描述：

在IOS微信中打开H5页面，当浏览器内出现跳转产生url历史记录时，页面底部会出现一个带有前进和后退按钮的工具栏，会遮挡页面底部的内容。css

分析缘由：

页面跳转时，微信浏览器经过window.history读取到浏览的历史记录，此时便会在页面底部显示出前进后退按钮的工具栏，形成页面底部内容遮挡。但刷新一下该页面，就不会遮挡了。底部的工具栏是在页面完成渲染以后才渲染的。html

解决方案：ios

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

因为未受权代码没法清除会话历史(session History)，也不能禁用回退/前进功能。最快捷的可用方式是使location.replace()方法，提供指定的URL来替换当前的会话历史(session history)。segmentfault

用replace替代push指第一个页面到第二个页面push->replace，其余页面不变。浏览器实际应有中IOS跳转应用商店使用的是中间页和tencent/camp-launch-app的插件，使用的是window.location.href = url跳转，未采用。

在第一个界面产生历史记录：能够在跳转到第一个页面前再加一个页面，此页面不须要内容直接跳转便可。缓存在实际应用中在第一个页面产生历史记录不是最优解决方案，未采用。

在页面加载以前经过主动添加空的历史记录，触发浏览器的history监听机制，让浏览器先于页面调出底部工具栏，从而解决遮挡问题。微信在路由守卫中增长对 window.history 的处理：

router.beforeEach((to, from, next) => {

window.history.replaceState(null, null, window.location.href);

next();

});

replaceState 是替换浏览历史中的上一条记录，用当前页面的地址替换上一条记录，本质上浏览历史是不变的。

经测试仅IOS 6 Plus生效。session

缘由：IOS微信中调整到下一页面后并未将上一页面修改的url保持在历史记录中。

eg: 返回上一页并未返回到 http://www.a.com?time=xxx，而... http://www.a.com 中。app

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

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兼容性：

Feature

Chrome

Firefox (Gecko)

Internet Explorer

Opera

Safari

Basic support

4

1.5 (1.8)

11

15

5

Feature

Android

Firefox Mobile (Gecko)

IE Mobile

Opera Mobile

Safari Mobile

Basic support

2.3

?

11

35

5.1

performance.navigation的type值为2，页面经过历史记录和前进后退访问时。

即：window.performance.navigation.type === 2

performance.navigation兼容性：

Feature

Chrome

Edge

Firefox

Internet Explorer

Opera

Safari

Basic support

10

12

7

9

15

8

Feature

WebView Android

Chrome Android

Firefox for Android

Opera Android

Safari on ios

Samsung Internet

Basic support

<= 37

18

7

No

9

1.0

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属性。

参考文章：