当键盘弹出后,页脚也被顶起来;而当搜索完(要刷新整体页面),键盘缩回后,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内容变空白的解决方,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对爱安网网站的支持!

    无相关信息
最新资讯
“拼一拼”搬到家门口 服务成本成社区团购绕不开的考验

“拼一拼”搬到家门口

社区团购成为巨头眼中获取新增长空间和新流量通道的又
直播购物井喷 菜鸟成双11“秘密武器”

直播购物井喷 菜鸟成

中台、算法、直播销量预测模型和电商专供“直播仓”,这
尚纬股份终止重组 罗永浩上市未果

尚纬股份终止重组 罗

从时间上看,从披露具体交易方案到双方终止合作,尚纬股份
戴森褪色 国产吸尘器机会来了吗

戴森褪色 国产吸尘器

不管是吸尘器还是吹风机,戴森确实在过去几年打造出几款
线下运营“坑”无数 巨头挤入的社区团购难在哪里?

线下运营“坑”无数

阿里、美团、腾讯、滴滴等公司的强势进入,也让社区团购
黑五亚马逊大放血 中国卖家却不想爆单

黑五亚马逊大放血 中

疫情之下,今年“黑五”是线下最冷清的一届,亚马逊抢了线
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,