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

91次阅读

共计 2689 个字符,预计需要花费 7 分钟才能阅读完成。

问题形容:
在 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 兼容性:

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

参考文章:

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

正文完
 0