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

最近在写h5 的时候要求去掉页面的前进和后退的横栏，记录一下自己的解决方案。

1. 首先说明一下h5的流程

前端调起h5 授权 > 用code 从服务器换取token > 记录下token，之后的每次请求带上token

2. 发生问题的原因

每次h5授权的时候，微信会重定向，这时候我们的页面就会带上这个前进和后退的横栏。

3. 怎么解决
我的想法是如果重定向不发生在前端页面而是在后台会不会就可以了？

在我们进入真正的h5 页面之前加一个过渡页面来授权。
也就是说我们的项目入口是test/index.php 而实际上的h5 代码是在index.html 里。

目录结构：
下面看一下代码：
index.php

<?php
if (!$_GET['code']){$url = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=http://***/test/index.php&response_type=code&scope=snsapi_base&state=1#wechat_redirect';die(header('location:'.$url));
}else{die(header('location:http://***/test/index.html?code='.$_GET['code']));
}

index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head>
<body>这是我们的h5 页面
</body>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="//cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>function getQueryString(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");var r = window.location.search.substr(1).match(reg);if(r != null) return decodeURI(r[2]);return null;}
</script>
</html>

也就是从index.php 进入后会带着code 被重定向到index.html。

H5页面底部前进、后退横栏怎么去除？相关推荐

html页面底部白条,用cookie解决新版微信中H5页面底部白条问题
5月23日微信更新6.6.7版本,新加的文章缩小浮窗功能确实很赞.不过,有一处更新颇使H5开发者感到困扰,就是在iPhone上H5页面最底部多了一个白色的前进后退控制栏,即下图底部的那个白条, 分析 ...
uni-app前端H5页面底部内容被tabbar遮挡的问题解决方案
转载https://cloud.tencent.com/developer/article/1609256 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar ...
移动端h5 页面底部有一条白线的解决方案
一般这种情况是由于img标签自带的属性导致,,,如果不是因为img导致的请另行百度 img标签自带有3px的空隙解决方案大致分为以下三种: img {font-size:0} img {displa ...
h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...
Hybrid App中原生页面 VS H5页面（分享）
本文部分转自 http://www.jianshu.com/p/00ff5664e000 现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有" ...
Hybrid App中原生页面 VS H5页面
Hybrid App中原生页面 VS H5页面现有3类主流APP,分别为:Web App.Hybrid App(混合模式移动应用,Hybrid有"混合的"意思). Native ...
解决并隐藏h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条.会占用页面的高度,如何去解决这个问题呢. 方案一页面跳转时重新定页面的高度,这样处理导航条仍然存在. 方案二使用histor ...
h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条,出现此情况的原因是: 由于底部导航栏是因为出现history记录才出现的.使用replace就没有history记录,解决办法 ...
H5页面在iphone手机底部出现留白的情况
今天在测试的时候,发现自己的h5页面在iphone手机上,有刘海儿和底部弧形时,底部出现了留白,解决方案是: 找到整个项目的public,index.html,找到其中的meta,加入viewport ...

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

H5页面底部前进、后退横栏怎么去除？相关推荐

最新文章

热门文章