微信页面弹出键盘后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 相关文章推荐
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
js中substring和substr的详细介绍与用法
Aug 29 Javascript
jquery分页对象使用示例
Apr 01 Javascript
深入分析Javascript事件代理
Jan 30 Javascript
JS中数组重排序方法
Nov 11 Javascript
js 颜色选择插件
Jan 23 Javascript
Node.js简单入门前传
Aug 21 Javascript
bootstrap datetimepicker控件位置异常的解决方法
Nov 23 Javascript
浅析Vue 和微信小程序的区别、比较
Aug 03 Javascript
vue之a-table中实现清空选中的数据
Nov 07 Javascript
Vue+ElementUI table实现表格分页
Dec 14 Javascript
javascript利用键盘控制小方块的移动
Apr 20 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP实现CSV文件的导入和导出类
2015/03/24 PHP
学习php设计模式 php实现模板方法模式
2015/12/08 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
filemanage功能中用到的lib.js
2007/04/08 Javascript
用dom+xhtml+css制作的一个相册效果代码打包下载
2008/01/24 Javascript
CSS(js)限制页面显示的文本字符长度
2012/12/27 Javascript
jQuery 删除/替换DOM元素的几种方式
2014/05/20 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jquery图形密码实现方法
2015/03/11 Javascript
jQuery实现文本展开收缩特效
2015/06/03 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
获取IE浏览器Cookie信息的方法
2017/01/23 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
2018/07/23 Javascript
js限制输入框只能输入数字(onkeyup触发)
2018/09/28 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
2019/09/11 Javascript
Python开发常用的一些开源Package分享
2015/02/14 Python
使用tensorflow实现AlexNet
2017/11/20 Python
[原创]pip和pygal的安装实例教程
2017/12/07 Python
Python即时网络爬虫项目启动说明详解
2018/02/23 Python
详解Python 正则表达式模块
2018/11/05 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
仿酷狗html5手机音乐播放器主要部分代码
2013/05/15 HTML / CSS
印尼最大的婴儿用品购物网站:Orami
2017/09/28 全球购物
教师实习自我鉴定
2013/12/14 职场文书
元旦获奖感言
2014/03/08 职场文书
少儿节目主持串词
2014/04/02 职场文书
党员学习群众路线教育实践活动对照检查材料
2014/09/23 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
大班下学期个人总结
2015/02/13 职场文书
Node-Red实现MySQL数据库连接的方法
2021/08/07 MySQL
python百行代码实现汉服圈图片爬取
2021/11/23 Python