当前位置：首页 > 资讯 > 技术文档

微信页面弹出键盘后iframe内容变空白的解决方案

时间：2022-06-29 23:18 编辑：来源：阅读：
扫一扫，手机访问

摘要：微信页面弹出键盘后iframe内容变空白的解决方案

当键盘弹出后，页脚也被顶起来；而当搜索完（要刷新整体页面），键盘缩回后，iframe里键盘当住的地方变成白色。 [img]http://files.jb51.net/file_images/article/201709/201709201628551.png?2017820163151[/img] [img]http://files.jb51.net/file_images/article/201709/201709201628552.png?2017820163250[/img] [b]前言：[/b] 因为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);

[b]解决方案：[/b] [b]原因： [/b] 当键盘放下后，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;
}

[img]http://files.jb51.net/file_images/article/201709/201709201628553.png?2017820163311[/img] [b]总结[/b] 以上所述是小编给大家介绍的微信页面弹出键盘后iframe内容变空白的解决方，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对编程素材网网站的支持！

全部评论(0)

上一篇：使用pcs api往免费的百度网盘上传下载文件的方法
下一篇：JS调用Android、Ios原生控件

资讯排行榜
更多>>