微信页面弹出键盘后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 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
node.js 一个简单的页面输出实现代码
Mar 07 Javascript
jquery鼠标滑过提示title具体实现代码
Aug 06 Javascript
分享JavaScript获取网页关闭与取消关闭的事件
Dec 13 Javascript
Jquery如何实现点击时高亮显示代码
Jan 22 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
解决低版本的浏览器不支持es6的import问题
Mar 09 Javascript
vue实现通讯录功能
Jul 14 Javascript
微信小程序云开发之数据库操作
May 18 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
如何去掉文章里的 html 语法
2006/10/09 PHP
解决GD中文乱码问题
2007/02/14 PHP
php设计模式 FlyWeight (享元模式)
2011/06/26 PHP
PHP 将逗号、空格、回车分隔的字符串转换为数组的函数
2012/06/07 PHP
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
jquery validate.js表单验证的基本用法入门
2010/05/13 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
2013/10/15 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
extjs_02_grid显示本地数据、显示跨域数据
2014/06/23 Javascript
jQuery的one()方法用法实例
2015/01/19 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
Javascript的表单验证-提交表单
2016/03/18 Javascript
Bootstrap所支持的表单控件实例详解
2016/05/16 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
2018/11/30 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
2020/01/08 Javascript
在Python的Django框架中编写错误提示页面
2015/07/22 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
在PyCharm下打包*.py程序成.exe的方法
2018/11/29 Python
linux安装python修改默认python版本方法
2019/03/31 Python
From CSV to SQLite3 by python 导入csv到sqlite实例
2020/02/14 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
用CSS3将你的设计带入下个高度
2009/08/08 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
自主招生自荐书
2013/11/29 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
终止劳动合同协议书
2014/04/14 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
科学发展观标语
2014/10/08 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
三十年同学聚会感言
2015/07/30 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
幽默导游词应该怎么写?
2019/08/26 职场文书
HTML中table表格拆分合并(colspan、rowspan)
2021/04/07 HTML / CSS