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

最新推荐文章于 2023-05-16 14:19:24 发布

爱分享的Martin、

最新推荐文章于 2023-05-16 14:19:24 发布

阅读量3.1k

点赞数 1

分类专栏：爬坑

本文链接：https://blog.csdn.net/qq_37026254/article/details/102721784

版权

爬坑专栏收录该内容

22 篇文章 0 订阅

订阅专栏

最近在写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。

爱分享的Martin、

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
H5页面底部前进、后退横栏怎么去除？

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

扫一扫