IOS下的微信H5页面的底部前进后退横栏的适配问题

iOS新版微信底部返回横条问题的解决 之前没有怎么接触过微信开发,只是对H5比较熟。最近维护一个微信公众号的项目,遇到了iOS端返回键的坑。 描述一下: 从公众号打开页面后,底部有个返回的小横条,恰好也挡住了页面。这不行啊,得解决。 页面的高度是调用 $(window).height();来获取的,但道理来讲应该没什么问题。 第一个反应是,要不判断一下设备,如果是iOS则给添加一个高度? 这个想法还没实行呢,就发现了一个现象。第一次进来的时候是挡着的,但是刷新一下就不挡了。然后就想着要不判断第一次进来给个刷新? 然后落实了,改代码。的确没有问题,进来之后会判断是否第一次,如果是第一次则刷新页面。刷新之后页面高度显示正常。 但是 立即下载

Question:最近做一个在微信和支付宝内置浏览器中运行的移动web界面,前几个月ios微信更新之后,微信将后退的按钮移至了底部横栏,遮挡住了原先底部的操作按钮。由于之前的页面设计是整屏显示禁止触摸滚动效果的,就想着是不是可以隐藏微信内置的底部横栏。

Answer:

1. 经过查资料,很多人说可以调用Weixin为H5应用提供开放原生能力的JS接口来隐藏/显示底部的状态栏。代码如下:

document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    WeixinJSBridge.call('hideToolbar');        // 隐藏底部状态栏
    WeixinJSBridge.call('hideOptionMenu');     // 隐藏右上角的三个点的选项
    WeixinJSBridge.call('showToolbar');        // 显示底部状态栏
    WeixinJSBridge.call('showOptionMenu');     // 显示右上角的三个点的选项
});
但是实际使用过程中,发现无效,使用微信开发者工具调试,发现报错:“error:WeixinJSBridge.call方法无效”,在微信公众平台的企业微信中发现,该方法适用于企业微信,而在订阅号或者服务号的开发文档中暂未发现这个方法。

// 接口调用代码(JavaScript) --- from 微信公众平台-企业微信开发文档
function onBridgeReady(){
   WeixinJSBridge.call('hideToolbar');
}
 
if (typeof WeixinJSBridge == "undefined"){
    if( document.addEventListener ){
        document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
    }else if (document.attachEvent){
        document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
        document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
    }
}else{
    onBridgeReady();
}
// 返回说明
// 隐藏底部导航栏没有返回值。(需要显示顶部导航栏,请把hideToolbar换成showToolbar) 
2. 暂且将页面调整为可以滚动的状态==!!!目前没有看到合适的方法撒,于是,还是来个滚动条吧

iOS新版微信底部工具栏遮挡问题完美解决 一、问题描述: 苹果设备(iOS)微信中打开H5页面,从首页跳转到其他页面后,页面的底部会出现一个带有前进和后退按钮工具栏,而该工具栏会遮挡住面底部的内容,影响页面的正常使用。 二、原因分析: 造成该现象的原因是,当页面跳转时,微信浏览器会通过window.history读取到浏览的历史记录,此时便会在页面底部显示出前进后退按钮的工具栏,造成页面底部内容遮挡。 三、解决方案: 了解了该问题出现的原因,我们也就有了解决办法。首先想到的方案就是控制浏览器的历史记录。由于考虑到安全性问题,浏览器的历史记录不支持删除和修改等操作,只能通过新增或替换的方式来实现对浏览历史的操作,因此可以有以下方案 立即下载

相关推荐

iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配

最近写小程序时,遇到了 iPhoneX 底部小黑线与内容重叠的问题,实际上是iPhoneX安全区域的适配问题,了解清楚这个问题花了挺多时间的,也实操出了结果,忍不住来总结总结。 前言 在苹果 iPhoneX 、iPhone XR等设备上,可以看到物理Home键被取消,改为底部小黑条替代home键功能。微信小程序和 h5 网页需要针对这种情况进行适配,否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况,如下图。 1. 安全区域是什么意思? 想要解决内容与小黑线重叠的问题,我们需要先了解清楚苹果对于安全区域的定义。 安全区域 安全区域指的是一个可视窗口范围,处于安全区域的内容不受圆角(corn

苹果浏览器微信底部返回栏显示/隐藏的问题

此段js代码完美解决 ; (function () { try { isIOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (fn.isIOS) { // window.history.pushState({}, "title", "#"); ...

ZH 7678

从零搭建ROS1导航小车(一):松灵SCOUT Mini底盘通讯配置与ROS包编译避坑指南

本文详细介绍了从零开始搭建ROS1导航小车的初始步骤,重点讲解松灵SCOUT Mini底盘的通讯配置与ROS包编译避坑指南。内容包括硬件连接、CAN通讯配置、ROS工作空间构建及编译优化等实用技巧,帮助开发者快速实现自主导航小车的通讯功能。

weixin_27014595的博客 189

如何隐藏微信内置底部前进后退的按钮?

在微信H5中,会有下面一个问题: 使用window.location.href进行页面跳转或者 react 内部项目使用 this.props.history.push 进行页面跳转时,做好的 h5 页面放在微信里,底部会出选前进后退的按钮,如下图: 解决方案如下:(适用于特殊场合) 第一种情况:如果只是页面之间跳转,使用 window.location.replace 代替w...

小草莓的博客 1万+

用Verilog搭出RISC-V架构单周期CPU

这是笔者学校暑期学期的必修课,难度并不高(仅追求及格的话),但相当耗时,对于在硬件设计方面完全不感冒的同学更是一场避不开的折磨,所以笔者想通过自己的成果和被折磨经验来帮助有此方面需求的同学,或是对于CPU设计有浓厚兴趣的人。

paticita的博客 1万+

FAGLB03余额显示异常排查与修复指南

本文针对SAP新总账中FAGLB03报表余额显示异常问题,提供了专业的排查与修复指南。文章深入剖析了数据不一致的核心原因,如FAGLFLEXT汇总表与凭证明细不同步、年度余额结转(FAGLGVTR)失败等,并详细介绍了使用FAGLF03进行精准诊断、通过SE38执行标准调整程序TFC_ADJUST_VZ进行修复的标准操作流程,帮助用户快速恢复数据一致性,确保财务报表的准确性。

weixin_29313423的博客 307

解决iOS微信底部返回横条问题

最近做微信公众号的开发,遇到 iOS新版微信的底部会出现返回小横条的坑。从公众号打开页面,底部有个返回的小横条,会遮挡页面底部。但是再刷新一下该组件页面,就不会遮挡了。其实就是第一次出现小白条时,页面高度获取会有问题。 #####一、解决部分问题 查资料得知**小横条的出现是因为页面跳转产生历史纪录。**所以我想,使网站不存在历史纪录,没有返回,从而不出现小横条。那么可以使用location.r...

の小蛋壳世界 2万+

Polardb训练营-本地部署 PolarDB-X

PolarDB-X是阿里巴巴自主设计研发的高性能云原生分布式数据库产品,为用户提供高吞吐、大存储、低延时、易扩展和超高可用的云时代数据库服务。云原生+MySQL生态PolarDB-X已作为标准云产品在世界范围内的13个地区提供服务。依托云资源和容器化部署能力,PolarDB-X可以在数分钟内完成集群创建和变配,整个过程中用...

yangjunfeng0604的博客 2473

H5页面底部前进、后退横栏怎么去除?

最近在写h5 的时候要求去掉页面的前进和后退的横栏,记录一下自己的解决方案。 1. 首先说明一下h5的流程 前端调起h5 授权 > 用code 从服务器换取token > 记录下token,之后的每次请求带上token 2. 发生问题的原因 每次h5授权的时候,微信会重定向,这时候我们的页面就会带上这个前进和后退的横栏。 3. 怎么解决 我的想法是如果重定向不发生在前端页面而是在后台...

嗝~ 4067

Cadence元件库介绍

Cadence安装完之后,在安装目录下,会有默认自带的一些常用元件库。例如,我的Candece安装目录为: D:\Cadence\Cadence_SPB_17.2-2016 元件库所在目录为: D:\Cadence\Cadence_SPB_17.2-2016\tools\capture\library 各个元件库对应的内容如下: AMPLIFIER.OLB 共 182 个零件,存放模拟放大器 IC,如 CA3280,TL027C,EL4093 等。 ARITHMETIC.OLB 共 182 个零件,存放

年少时的棉花糖 1万+

Unreal Engine开发:多人联机与网络同步_延迟补偿与预测

通过延迟补偿和预测技术,我们可以显著减少网络延迟对多人在线动作游戏的影响,提升玩家的体验。延迟补偿主要在服务器端实现,通过回溯时间点来更准确地处理输入和事件。预测技术主要在客户端实现,通过预先计算玩家的动作结果来减少延迟感。结合这两种技术,可以实现更平滑、更公平的多人游戏体验。

chenlz2007的博客 1191

h5页面在新版微信iOS 端出现底部白色导航条

新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条,出现此情况的原因是: 由于底部导航栏是因为出现history记录才出现的。使用replace就没有history记录,解决办法使用history.replace代替history.push 比如Vue中解决方式: 1 . dom跳转:<router-link :to="pageUrl" replace&gt...

xiang1907的博客 4814

Agent Harness Engineering: AI Agent 执行管控与安全沙箱 原理与最佳实践

我们正站在计算范式转移的历史节点上。2024-2026 年间,AI 系统从被动的内容生成器(Generative AI)演变为主动的行动执行者(Agentic AI)。这一转变的根本特征是:根据 2026 年初的行业数据:然而,能力的提升伴随着风险的指数级增长。2024-2026 年间发生的多起标志性安全事件揭示了 Agent 系统的脆弱性:案例 1:Slack AI 数据外泄事件(2024 年 8 月)案例 2:制造业供应链攻击(2026 年 Q3)案例 3:Arup 深度诈骗案(2026 年 9 月)这

AI天才研究院 1669

微信开发 Weixin JS接口 隐藏微信中网页底部导航栏

公众号在有需要时(如认为用户在该页面不会用到浏览器前进后退功能),可在网页中通过JavaScript代码隐藏网页底部导航栏。

开放源码的微信应用系统 微微信.NET 研究 2万+

SAP SD模块定价过程后台配置简介

只有手工输入定价时(例如,在定价中的定价浏览屏幕中),或者只有从外部处理转移这些定价时(例如,成本核算),才将这些定价包括在确定(价格确定、输出确定,批次确定)之中。定价过程的定义和分配是SD模块中最核心的配置,包含了条件表、条件类型、存取顺序、发票类型、客户定价过程等,确定了销售订单已什么价格销售、税率、附加折扣等多个条件行程有一个定价过程。12、小计:记录该条件类型在VBAP表中是否存储,以及其后续用途,如记入信贷,占用信贷额度,记入成本等,如果需要金额暂用信贷额度的话,在小计这里选择A即可。

我小时候很黑的博客 3783

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

解决ios微信公众号h5页面新增底部前进后退导航栏产生的布局问题

现象:第一次出现微信底部默认导航的时候布局会错乱(在项目中底部弹窗显示不完整),在出现错乱的页面刷新又能恢复正常。 问题产生原因:新增导航栏使网页脱离文档流的屏幕高度变小,有些布局没有重新计算(更加具体的原因就没有管了,项目已经是一个成熟的项目,用的框架也不是新框架,会存在样式穿透的问题,很多东西还是少动为妙)。 问题分析和解决:底部导航栏是因为出现history记录才出现的,再加上我所作的项目刷新一下页面就能恢复正常。优先考虑在出现history后重新加载页面,监听屏幕高度变化(安卓机不会新增导航),再利

weixin_46544600的博客 7694

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

iOS微信底部工具栏遮挡

微信底部工具栏(< >箭头)遮挡了H5页面底部导航 问题图片: 希望结果: 问题原因: 页面加载完成后,微信浏览器向窗体内推送了一个控制插件,会遮盖页面本身的元素 解决方案: 让底部导航条延时加载显示 <script> setTimeout(_=>{$('.body-footer').show()},100); </script> 页面代码: <!DOCTYPE html> <html lang="en"> <head&g

yuexiao19921008的博客 1735

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

C# WinForm 基于DirectShow.dll编写的程序,可边预览边保存视频,音频和图片

基于微软的DirectShow.dll的二次开发1.自动识别连接的摄像头跟麦克风且可以对其进行选择(默认选中第一个)2.可录制wmv和avi两种格式的视频并且都带有音频,avi可以录制的分辨率和帧数进行选择,wmv默认进行了淸晰度优化如不喜欢可去除代码中有相关提示3.可在预览点开之后进行拍照,也可边录制视频边拍照4.添加了视频和音频的压缩功能(酌情使用)这次二次开发发现C#对DirectShow的相关信息太少,这次做完也不敢藏私共享出来,还望大家指正

移动端H5适配iphoneX底部栏,css快速解决方案

1、meta标签放入viewport-fit=cover <meta name="viewport" content="width=device-width...... viewport-fit=cover"> 2、css设置(不要忘记将底部栏放上“footer”这个class类名) @supports (bottom: env(safe-area-inset-bottom)){ body, .footer(底部栏){ padding-bottom: const

ZH 2623

H5适配iphoneX底部(只需2步)

H5适配iphoneX底部 只需2步 首先我们要明白 iphoneX底部适配是要和H5页面的底部选项卡做兼容 所以我们要判断在iphoneX下 把选项卡底部到屏幕底部的中间部分自动填充 1.设置meta属性,在content下设置关键值 viewport-fit=cover <meta name="viewport" content="viewport-fit=cover" /> 2.底部选项卡判断(以下是关键步骤,其他样式省略) // 设置固定定位,将bottom设置为0 .footerBo

qq_41293573的博客 1455

iOS新版微信底部返回横条问题

之前没有怎么接触过微信开发,只是对H5比较熟。最近维护一个微信公众号的项目,遇到了iOS端返回键的坑。 描述一下: 从公众号打开页面后,底部有个返回的小横条,恰好也挡住了页面。这不行啊,得解决。 页面的高度是调用 $(window).height();来获取的,但道理来讲应该没什么问题。 第一个反应是,要不判断一下设备,如果是iOS则给添加一个高度? 这个想法还没实行呢,就发现了一个现象。第一次进来的时候是挡着的,但是刷新一下就不挡了。然后就想着要不判断第一次进来给个刷新? 然后落实了,改代码。的确没有问题

qq_43248623的博客 1807

ios微信h5底部的横栏怎么去掉

不过,这些方法会因微信浏览器版本的不同有所变化,可能并不适用于所有的iOS微信H5环境。在iOS微信H5中,底部的横栏通常是由微信浏览器自带的导航栏所引起的。3.通过iOS的特定CSS样式来隐藏导航栏和底部横栏。2.通过css样式来隐藏导航栏和底部横栏。1.切换到微信浏览器的全屏模式。一切还是以调试为主。

sunyanjing_8949的博客 3894

iOS 微信 音视频自动播放 && 原生接口WeixinJSBridge API(一些整理 & 小技巧)

原文链接1:https://www.w3ctech.com/topic/1165 原文链接2:https://www.cnblogs.com/jasonduan/p/5635048.html 做一下整理. 方便查看, 如有具体需求 请去原始链接查看 文章包括: iOS 微信 音视频自动播放 的解决方案 微信 一些原生接口的api 微信原生经过混淆的js api (提供链接 自行查看) ** i...

丶党玲儿的博客 4418

H5 开发中的那些注意细节,必看!!!

请注意,这些方法可能会因微信浏览器版本的不同而有所变化,可能并不适用于所有的i0S微信H5环境。最近和朋友们一起研究开发了一款纸牌小游戏,一切就绪后,发现在苹果手机中打开浏览会出现一些隐藏BUG,需要开发结束后进行统一处理。浏览器在移动端有一个默认触摸滚动的效果,让我们感触最深的莫过于微信浏览器里面,下拉时自带橡皮筋的效果。3.使用i0S的特定样式:你还可以尝试使用i0S的特定CSS样式来隐藏导航栏和底部横栏。在iOS微信H5中,底部的横栏通常是由微信浏览器自带的导航栏所引起的。要去掉可以试试下述方式。

虎康的博客 1771
上一篇: 前端个人笔记
下一篇: Margin的深入了解
追根溯源
博客等级 码龄14年 17粉丝 68原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值