html页面底部白条,用cookie解决新版微信中H5页面底部白条问题
5月23日微信更新6.6.7版本,新加的文章缩小浮窗功能确实很赞。不过,有一处更新颇使H5开发者感到困扰,就是在iPhone上H5页面最底部多了一个白色的前进后退控制栏,即下图底部的那个白条,
分析
在微信里只要发生页面跳转,这个控制浏览器前进后退的白色条就会出现。
如果进入H5首页每次都要微信授权来获取用户信息,那这个白条将每次都会出现,因为oauth授权一定会有跳转。第一次授权跳转是无法避免的,那么只要避免用户进行二次授权,也就避免了白条的再次出现。所以,解决问题的关键点在于如何避免微信二次授权。
解决方法
获取用户信息方法之前是分享过的,在上篇代码上继续优化,来实现避免微信二次授权。
实现思路是,引入cookie功能,创建一个存储访客微信用户信息的cookie。当用户首次访问时,通过oauth授权获取用户信息,并存储于cookie中。当用户再次访问时,判断是否有相应cookie来调取用户信息,这样就不会触发二次授权。
首先,定义创建和读取cookie的函数,
// 创建cookie
function setCookie(c_name, value, expiredays){
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name+ "=" + escape(value) +((expiredays==null) ? "" : "; expires="+exdate.toGMTString());
}
// 读取cookie
function getCookie(c_name){
if(document.cookie.length > 0){
c_start = document.cookie.indexOf(c_name + "=");
if(c_start != -1){
c_start = c_start + c_name.length + 1 ;
c_end = document.cookie.indexOf(";", c_start)
if(c_end == -1){
c_end = document.cookie.length;
}
return unescape(document.cookie.substring(c_start, c_end));
}
}
return "";
}
然后,通过检查是否有用户信息cookie值,来判断是否要跳转授权,
var openid; // 用户openid
var nickname; // 用户昵称
var headimgurl; //用户头像
// 检查cookie
function checkCookie(){
userinfo = getCookie('userinfo');
if(userinfo != null && userinfo != "" && userinfo != "null,null,null"){ // 有相应cookie,读取用户信息
var strArr = userinfo.split(',');
openid = strArr[0];
nickname = strArr[1];
headimgurl = strArr[2];
}else{ // 没有相应cookie,重新授权并写入cookie
openid = getUrlParam("openid");
nickname = getUrlParam("nickname");
headimgurl = getUrlParam("headimgurl");
/*
此处为“跳转授权,获取用户信息代码”。上篇分享过,这里省略... ...
*/
var strInfo = openid + "," + nickname + "," + headimgurl;
setCookie('userinfo', strInfo, 365); // 创建cookie,cookie的名称、值以及过期天数。
}
}
在进入页面后,调用以上方法,即可解决问题。
原文:https://blog.csdn.net/gaofei880219/article/details/80569026
html页面底部白条,用cookie解决新版微信中H5页面底部白条问题相关推荐
- ios系统微信浏览器、safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法
ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 参考文章: (1)ios系统微信浏览器.safari浏览器中h5页面上拉下滑导致悬浮层脱离窗口的解决方法 (2) ...
- html5 页面回退,一种基于浏览器堆栈管理的H5页面动态回退方法与流程
本技术应用于在浏览器运行的H5应用中,涉及浏览器的History历史堆栈管理技术,尤其是移动端H5应用在浏览器中的History历史堆栈管理技术. 背景技术: 移动端H5应用作为一款基于浏览器历史堆栈 ...
- 微信的H5页面缓存清理方案
方案1.微信手动清理 安卓端的微信,打开:http://debugx5.qq.com,点击清除 IOS端的微信,清除缓存方法如下:1.打开微信,找到"我-设置-通用-存储空间-清理微信缓存& ...
- h5页面生成图片分享到微信js_微信端h5页面如何调用分享页面的接口
这次给大家带来微信端h5页面如何调用分享页面的接口,微信端h5页面调用分享页面接口的注意事项有哪些,下面就是实战案例,一起来看一下. 最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加 ...
- 微信浏览器H5页面自动播放背景音乐
微信浏览器H5页面自动播放背景音乐 最近遇到一个需求 一个文章详情页(图文结合) 进入页面后自动播放背景音乐 正常用video标签后安卓打开后是自动播放的 但是ios是不支持自动播放的 经过不懈努力的 ...
- 企业微信开发H5页面授权 使用接口的问题
企业微信 h5踩坑指南 企业微信开发H5页面授权 使用接口的问题 开发企业微信的时候 h5页面需要获取登录用户的信息,这个时候就需要jsdk里面的 [开发文档] (https://work.weixi ...
- vue 项目中H5页面,实现大转盘活动
vue 项目中H5页面,实现大转盘活动 <template><div class="about"><div id="app"> ...
- IOS系统中H5页面实现摇一摇功能
公司准备开年会了,年会活动用了一套别人的系统,根据测试,有些游戏的摇一摇功能在IOS上无法使用,为了修复该功能,踩了一些坑,特此记录如下: 1. 因为IOS系统的安全要求,项目必须是在https的域名 ...
- 解决并隐藏h5页面在新版微信iOS 端出现底部白色导航条
新版微信在苹果iOS 端的h5页面如果有路由跳转,会出现底部白色导航条.会占用页面的高度,如何去解决这个问题呢. 方案一 页面跳转时重新定页面的高度,这样处理导航条仍然存在. 方案二 使用histor ...
最新文章
- oracle安装问题: 11g安装未填写hosts导致弹窗错误
- Linux中利用grep命令如何检索文件内容详解
- WCF 入门之旅(4): 怎样用客户端调用WCF服务
- Windows 技术篇-是否允许程序连接网络误操作解除方法,如何解除阻止程序连接网络,程序连接网络设置方法
- qt label显示文字_Qt官方示例共享内存
- 用JS实现人脑和计算机交互,这个厉害了
- PHP去除换行符的方法小结(PHP_EOL变量的使用)
- C#通过VS连接MySQL数据库实现增删改查基本操作
- [bzoj 3110] [ZJOI2013] K大数查询
- mvp+dagger2_Android MVP + Dagger2 +改造+ RxJava
- Struts第八篇【资源国际化、对比JSP的资源国际化】
- 《奇点来临》——阿西莫夫三大定律
- Windows上搭建Git服务器
- TeaVM编译JAVA感想:看着简单,做起来真难
- The Apache Tomcat Native library which allows using OpenSSL was not found on the java.library.path
- duplicate designator is not allowedC/C++(2906)
- PAKDD 2019 都有哪些重要看点?看这篇文章就够了!...
- 像素级图像融合的常用算法
- 梅尔频谱图与音频相互转化
- Python练习14:天天向上的力量I
热门文章
- C#5 复习总结循环 迭代和穷举
- 在win7下安装VC6.0
- Liferay MinifierFilter的研究
- 庆祝自开博来首篇浏览数过万的随笔诞生 - [原创]从程序员角度分析安徽电信HTTP劫持的无耻行径......
- JDK源码(14)-Error、Exception
- 【java】初始化一个指定大小的list,在指定位置set存入元素,下标越界
- 第七章:nginx的rewrite规则详解
- Java同步机制之Monitor监视器与syncrhoized实现原理
- 项目以任务还是以功能为中心?
- 软件测试的学习之路-----计算机基础 (详情展示)