微信页面弹出键盘后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 相关文章推荐
不错的一个日期输入 动态
Nov 06 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
值得分享的轻量级Bootstrap Table表格插件
May 30 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)
Sep 01 Javascript
javascript 判断一个对象为数组的方法
May 03 Javascript
详解a++和++a的区别
Aug 30 Javascript
Angularjs Ng_repeat中实现复选框选中并显示不同的样式方法
Sep 12 Javascript
layUI使用layer.open,在content打开数据表格,获取值并返回的方法
Sep 26 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 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
《一拳超人》埼玉一拳下去,他们存在了800年毫无意义!
2020/03/02 日漫
剖析 PHP 中的输出缓冲
2006/12/21 PHP
PHP 巧用数组降低程序的时间复杂度
2010/01/01 PHP
php设计模式 Delegation(委托模式)
2011/06/26 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
JQuery中对服务器控件 DropdownList, RadioButtonList, CheckboxList的操作总结
2011/06/28 Javascript
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
JS和函数式语言的三特性
2014/03/05 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
Vue.js之slot深度复制详解
2017/03/10 Javascript
解决layer图标icon不加载的问题
2019/09/04 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
vue+webpack 更换主题N种方案优劣分析
2019/10/28 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
[42:50]NB vs VP 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python解析xml中dom元素的方法
2015/03/12 Python
Python中IPYTHON入门实例
2015/05/11 Python
Python下Fabric的简单部署方法
2015/07/14 Python
python爬虫爬取淘宝商品信息
2018/02/23 Python
Python发展简史 Python来历
2019/05/14 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python设置随机种子实例讲解
2019/09/12 Python
解决tensorflow由于未初始化变量而导致的错误问题
2020/01/06 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
幼儿园教师辞职信
2014/01/18 职场文书
军训感想500字
2014/02/20 职场文书
升职演讲稿范文
2014/05/23 职场文书
幼儿园母亲节活动总结
2015/02/10 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书