微信页面弹出键盘后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 相关文章推荐
jQuery自带的一些常用方法总结
Sep 03 Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 Javascript
JS实现的简洁纵向滑动菜单(滑动门)效果
Oct 19 Javascript
把json格式的字符串转换成javascript对象或数组的方法总结
Nov 03 Javascript
Node.js中看JavaScript的引用
Apr 22 Javascript
Node.js服务器开启Gzip压缩教程
Aug 11 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
vue filter 完美时间日期格式的代码
Aug 14 Javascript
JQuery 实现文件下载的常用方法分析
Oct 29 jQuery
TypeScript高级用法的知识点汇总
Dec 17 Javascript
微信小程序点击滚动到指定位置的实现
May 22 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目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP的几个常用加密函数
2016/02/03 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
JS中Iframe之间传值及子页面与父页面应用
2013/03/11 Javascript
Javascript表格翻页效果的具体实现
2013/10/05 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
jQuery实现的分子运动小球碰撞效果
2016/01/27 Javascript
jQuery Easyui学习教程之实现datagrid在没有数据时显示相关提示内容
2016/07/09 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
Angular.js跨controller实现参数传递的两种方法
2017/02/20 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
逐行分析鸿蒙系统的 JavaScript 框架(推荐)
2020/09/17 Javascript
Vue实现返回顶部按钮实例代码
2020/10/21 Javascript
Ant Design moment对象和字符串之间的相互转化教程
2020/10/27 Javascript
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
在Lighttpd服务器中运行Django应用的方法
2015/07/22 Python
python实现逻辑回归的方法示例
2017/05/02 Python
Python找出最小的K个数实例代码
2018/01/04 Python
django 多数据库配置教程
2018/05/30 Python
python主要用于哪些方向
2020/07/05 Python
python文件路径操作方法总结
2020/12/21 Python
HTML5拖拉上传文件的简单实例
2017/01/11 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
如何用Python来进行查询和替换一个文本字符串
2014/01/02 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
校园安全标语
2014/06/07 职场文书
企业公益活动策划方案
2014/08/24 职场文书
2014年维修电工工作总结
2014/11/20 职场文书
初中生考试作弊检讨书
2014/12/14 职场文书
SQL Server代理:理解SQL代理错误日志处理方法
2021/06/30 SQL Server