微信页面弹出键盘后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内容变空白的解决方，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • Android 高仿微信支付数字键盘功能

    Android 高仿微信支付数字键盘功能

    现在很多app的支付.输入密码功能,都已经开始使用自定义数字键盘,不仅更加方便.其效果着实精致. 下面带着大家学习下,如何高仿微信的数字键盘,可以拿来直接用在自身的项目中. 先看下效果图: 1. 自定义布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

  • 微信jssdk在iframe页面失效问题的解决措施

    项目需求 微信端添加拍品的页面有照片上传功能,上传时打开一个iframe,该页面用canvas加载用微信jssdk的选择图片接口选择的图片(这里微信会返回一个形如weixin://xxxx的localid,可直接放在img的src里进行预览),可进行放大缩小移动旋转等操作,点击确定按钮将编辑好的图片发送到服务器存成图片 遇到的问题 当子页面功能开发完成后,在主页面通过iframe打开子页面,无法调用微信jssdk接口中的选择图片接口,其他jssdk中的接口也无法正常工作.但是单独打开子页面可以正

  • 安卓输入框被虚拟键盘挡住的问题(微信开发)

    安卓输入框被虚拟键盘挡住的问题(微信开发)

    先通过一个页面看下事情的来龙去脉,页面如下所示: 这个页面刚好一屏幕大小,所以没有滚动条,因为"保存"键上面那个项目备注是需要用户去填写的,当他点击后就会出现虚拟键盘,但安卓手机弹出键盘会遮住这个输入框,以至于用户看不见了.苹果手机天然不会喔,苹果手机的键盘弹出来是占了下面的位置,从而把页面推了上去,整个页面就缩小了就不会出现这样的情况.安卓手机情况如下图: 我不停尝试去解决这个问题,但最终都不成功. 思考一: 如果能模仿苹果一样,当键盘弹出来的时候,将整个页面缩小成页面底部刚好贴着键

  • Android高仿微信表情输入与键盘输入详解

    Android高仿微信表情输入与键盘输入详解

    最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个相当困扰我,不过所幸在Github(其中一个不错的开源项目,其代码整体结构很不错)并且在论坛上找些解决方案,再加上我也是研究了好多个开源项目的代码,最后才苦逼地整合出比较不错的实现效果,可以说跟微信基本一样(嘿嘿,只能说目前还没发现大Bug,若发现大家一起日后慢慢完善,这里我也只是给出了实现方案,拓展其他表情我并没有实现哈,不过代码中我实现了一个可拓展的fragment模板以便大

  • ionic在开发ios系统微信时键盘挡住输入框的解决方法(键盘弹出问题)

    在使用ionic开发IOS系统微信的时候会有一个苦恼的问题,填写表单的时候键盘会挡住输入框,其实并不算什么大问题,只要用户输入一个字就可以立刻看见输入框了. 可惜的是,有些客户是不讲理的,他才不管这个问题,反正就是不行,所以在一天睡觉的时候突然惊醒,想出来这个方案. 我就不仔细讲代码了,直接上图 angular.module('MyApp') .directive('focusInput', ['$ionicScrollDelegate', '$window', '$timeout', '$io

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

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

    当键盘弹出后,页脚也被顶起来:而当搜索完(要刷新整体页面),键盘缩回后,iframe里 键盘当住的地方变成白色. 前言: 因为iframe要适配,so,高度要计算出来 //整体高 var win = $(window).height(); //搜索栏 var header = $('header').height(); //导航栏 var nav = $('.navdivwrap').height(); //页底 var footer = $('footer').height(); //ifra

  • 微信浏览器弹出框滑动时页面跟着滑动的实现代码（兼容Android和IOS端）

    在做微信开发的时候遇到这个问题:微信浏览器弹出框滑动时页面跟着滑动. 我觉得这个问题用的是下面这几行代码: var $body = $('body'), dialogIsInView = !1,//当前是不是对话框 lastContentContainerScrollTop = -1,//用于弹出框禁止内容滚动 $contentContainer = $('#content-container');//内容容器 //阻止Window滚动 function stopWindowScroll() {

  • 在iframe中使bootstrap的模态框在父页面弹出问题

    在iframe中使bootstrap的模态框在父页面弹出问题

    这几天在写项目的中,页面使用了iframe,然而在子页面中使用bootstrap的模态框时发现:弹出的模态框位置是以子页面为标准居中的,并且遮罩层也只有子页面那一部分,整个页面简直无法直视,所以思考可以可以让模态框以父页面为标准弹出,经过在网上查找资料,总结了一种解决方法. 效果展示 修改前页面 修改后页面 实现思路 要想使模态框在顶级页面打开,我想到的方法是使bootstrap的模态框弹在父页面弹出即可. 首先我们将需要弹出的div单独写一个页面,当子页面需要弹出时,在父页面弹出div即可.

  • layer.open 子页面弹出层向父页面传输数据的例子

    子页面向父页面传数据,利用弹出页面点击确定时返回的参数,即yes:function(index,layero){}的layero. 关键就一句: var obj = $(layero).find("iframe")[0].contentWindow; obj可以调用子页面的方法,这样就可以通过子页面传递数据了. $('#addQuota').on('click',function(){ layer.open({ type : 2, title : "子页面", re

  • flutter 实现点击下拉栏微信右上角弹出窗功能

    flutter 实现点击下拉栏微信右上角弹出窗功能

    先看效果实现 需求分析 这个是使用 PopupRoute这个路由类进行实现 大概原理就是利用PopupRpute这个类进行改造,然后自定义一个页面,页面内镶嵌一个动画类,用来实现缩放动画 大概分为三部分,PopupRoute改造,弹出页面设置,动画类设置. 为什么选择PopupRoute? 可以镶嵌在flutter本身的路由管理之中 也就是逻辑操作都是正常的页面管理,可以手动管理,也可以用路由返回直接关掉,不会影响原有页面和布局 第一步,改造PopupRoute类 import 'package

  • jQuery点击按钮弹出遮罩层且内容居中特效

    jQuery点击按钮弹出遮罩层且内容居中特效

    本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi

  • HTML页面弹出居中可拖拽的自定义窗口层

    HTML页面弹出居中可拖拽的自定义窗口层

    使用DIV弹出窗口来动态显示内容的原理:首先采用CSS和HTML隐藏弹窗中的内容,然后利用JavaScript(本教程中是JQuery)来动态显示它们.这种效果不仅能够充分利用有限的版面空间,而且能够提高用户体验:更重要的是,它并不影响SEO效果(因为它实际存在于页面中,只是初始为不可见状态) 1.在html页面中定义一个div,并在div实现我们需要展示的内容. 复制代码 代码如下: <body> <div id="login"> <h2><

  • PopupWindow仿微信浮层弹出框效果

    最近公司项目需要实现类似微信的浮层弹出框.研究发现是用PopupWindow实现的.而且可以自定义位置以及出现和退出时的动画,由于太晚了就不实现动画了,需要得同学请自己研究下.由于本人新手其中的不足和缺点请见谅. 代码如下: 首先是定义顶部按钮的main.xml文件 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.an

  • JQuery实现页面弹出框

    JQuery实现页面弹出框

    本文实例为大家分享了JQuery实现页面弹出框的具体代码,供大家参考,具体内容如下 bootstrap4里面有个模态框,点击页面中的某个按钮或者元素就会弹出一个框框: 今天尝试用JQ来实现一下,具体的思路就是: 1.在页面中创建一个div2.用JQ中的hide()和show()来控制上面的div的隐藏和显示 第一步:创建按钮,div,样式 <head>     <meta charset="UTF-8">     <title>页面弹出框</t

  • IOS开发仿微信右侧弹出视图实现

    IOS开发仿微信右侧弹出视图实现

    IOS开发仿微信右侧弹出视图实现 微信首页的+号,点击之后会弹出一个更多的视图,这个视图如何实现呢? 实现该效果可能需要以下技术要点: 1.图片拉伸,通过拉伸图片的中间的较小区域来保持图片的边上的形状 2.仿射变换,用到仿射变换的缩放,平移和合并,视图动画 3.navigationBar的样式设置 实现效果,如下: 本Demo图片来源微信安装包解压得到的图片 实现代码: // // ViewController.m // appXX-微信更多工具栏 // // Created by MRBean

随机推荐