微信页面弹出键盘后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 相关文章推荐
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
javascript实现数字验证码的简单实例
Feb 10 Javascript
JavaScript实现动态添加,删除行的方法实例详解
Jul 02 Javascript
javascript中alert()与console.log()的区别
Aug 26 Javascript
Node.js的npm包管理器基础使用教程
May 26 Javascript
jQuery文字提示与图片提示效果实现方法
Jul 04 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
防止页面url缓存中ajax中post请求的处理方法
Oct 10 Javascript
vue.js select下拉框绑定和取值方法
Mar 03 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
JS中比Switch...Case更优雅的多条件判断写法
Sep 05 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的session过期设置
2013/06/29 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
PHP工厂模式简单实现方法示例
2018/05/23 PHP
jquery操作cookie插件分享
2014/01/14 Javascript
JavaScript中通过prototype属性共享属性和方法的技巧实例
2015/03/13 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
jquery二级目录选中当前页的css样式
2016/12/08 Javascript
基于jQuery实现的查看全文功能【实用】
2016/12/11 Javascript
nodejs利用ajax实现网页无刷新上传图片实例代码
2017/06/06 NodeJs
收集前端面试题之url、href、src
2018/03/22 Javascript
vue实现点击关注后及时更新列表功能
2018/06/26 Javascript
Angular动画实现的2种方式以及添加购物车动画实例代码
2018/08/09 Javascript
在Vue中使用axios请求拦截的实现方法
2018/10/25 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
前端开发基础javaScript的六大作用
2020/08/06 Javascript
浅谈JavaScript中等号、双等号、 三等号的区别
2020/08/06 Javascript
微信小程序实现可拖动悬浮图标(包括按钮角标的实现)
2020/12/29 Javascript
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
浅谈Python NLP入门教程
2017/12/25 Python
python中的随机函数小结
2018/01/27 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Pycharm安装并配置jupyter notebook的实现
2020/05/18 Python
PUMA澳大利亚官方网站:德国运动品牌
2018/10/19 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
计算机专业职业规划
2014/02/28 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
授权委托书
2014/07/31 职场文书
肖申克的救赎观后感
2015/06/02 职场文书
旅游投诉信范文
2015/07/02 职场文书
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
手写Spirit防抖函数underscore和节流函数lodash
2022/03/22 Javascript