微信页面弹出键盘后iframe内容变空白的解决方案


Posted in Javascript onSeptember 20, 2017

当键盘弹出后,页脚也被顶起来;而当搜索完(要刷新整体页面),键盘缩回后,iframe里 键盘当住的地方变成白色。

微信页面弹出键盘后iframe内容变空白的解决方案

微信页面弹出键盘后iframe内容变空白的解决方案

前言:

因为iframe要适配,so,高度要计算出来

//整体高
var win = $(window).height();
//搜索栏
var header = $('header').height();
//导航栏
var nav = $('.navdivwrap').height();
//页底
var footer = $('footer').height();
//iframe
$('#main').height(win -header + nav - footer);

解决方案:

原因:

当键盘放下后,iframe的高度没有再重新设置而导致的。

方案① : 将首次iframe的高度放在cookie里

注意:在小米6 中,'win' 貌似冲突了,so 改 ‘win1'

//导入
<script src="jquery.cookie.js"></script>
var win = $(window).height();
//获取cookie里
var winCookie = $.cookie("win1",{path: '/' });
//若cookie里无,则填充;若cookie里有,则取出
if(!winCookie){
 $.cookie("win1", win,{path: '/' });
}else{
 win = winCookie;
}

微信页面弹出键盘后iframe内容变空白的解决方案

总结

以上所述是小编给大家介绍的微信页面弹出键盘后iframe内容变空白的解决方,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
javascript Math.random()随机数函数
Nov 04 Javascript
基于jquery的时间段实现代码
Aug 02 Javascript
js操作iframe的一些方法介绍
Jun 25 Javascript
jQuery判断checkbox是否选中的小例子
Dec 02 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
为什么JavaScript没有块级作用域
May 22 Javascript
AngularJS实现星星等级评分功能
Sep 24 Javascript
Angularjs中数据绑定的实例详解
Aug 25 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 Javascript
微信小程序报错: thirdScriptError的错误问题
Jun 19 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
微信小程序 页面跳转事件绑定的实例详解
Sep 20 #Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 #Javascript
Angularjs使用过滤器完成排序功能
Sep 20 #Javascript
微信小程序 swiper组件构建轮播图的实例
Sep 20 #Javascript
node+koa实现数据mock接口的方法
Sep 20 #Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 #Javascript
ES6中Array.includes()函数的用法
Sep 20 #Javascript
You might like
PHP在Web开发领域的优势
2006/10/09 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
php开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
javascript从image转换为base64位编码的String
2014/07/29 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
javascript动态生成树形菜单的方法
2015/11/14 Javascript
微信小程序 vidao实现视频播放和弹幕的功能
2016/11/02 Javascript
ionic2 tabs 图标自定义实例
2017/03/08 Javascript
Bootstrap表单制作代码
2017/03/17 Javascript
Vue.js教程之axios与网络传输的学习实践
2017/04/29 Javascript
nodejs制作爬虫实现批量下载图片
2017/05/19 NodeJs
JavaScript中重名的函数与对象示例详析
2017/09/28 Javascript
浅谈Koa2框架利用CORS完成跨域ajax请求
2018/03/06 Javascript
详解Vue组件之作用域插槽
2018/11/22 Javascript
详解auto-vue-file:一个自动创建vue组件的包
2019/04/26 Javascript
js回调函数仿360开机
2019/12/26 Javascript
vue实现井字棋游戏
2020/09/29 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
Python构建网页爬虫原理分析
2017/12/19 Python
Python+matplotlib绘制不同大小和颜色散点图实例
2018/01/19 Python
基于python plotly交互式图表大全
2019/12/07 Python
Python找出列表中出现次数最多的元素三种方式
2020/02/24 Python
Python多线程正确用法实例解析
2020/05/30 Python
如何卸载python插件
2020/07/08 Python
PyQt5的相对布局管理的实现
2020/08/07 Python
Original Penguin英国官方网站:美国著名休闲时装品牌
2016/10/30 全球购物
最新茶叶店创业计划书
2014/01/14 职场文书
大学生秋游活动方案
2014/02/17 职场文书
酒店管理毕业生自我鉴定
2014/03/02 职场文书
有趣的广告词
2014/03/18 职场文书
开学典礼策划方案
2014/05/28 职场文书
小学教师岗位职责
2015/04/02 职场文书
详解MySQL多版本并发控制机制(MVCC)源码
2021/06/23 MySQL
攻击最高的10只幽灵系神奇宝贝,坚盾剑怪排第一,第五最为可怕
2022/03/18 日漫