The iframe content becomes blank after the keyboard pops up on the WeChat page

This article mainly shares with you the solution to the problem that the iframe content becomes blank after the keyboard pops up on the WeChat page. When the keyboard pops up, the footer is also pushed up; and when the search is completed (the entire page needs to be refreshed), the keyboard is retracted, and the area where the keyboard resides in the iframe turns white.

Foreword:

Because the iframe needs to be adapted, so, the height needs to be calculated

//整体高
var win = $(window).height();
//搜索栏
var header = $('header').height();
//导航栏
var nav = $('.navpwrap').height();
//页底
var footer = $('footer').height();
//iframe
$('#main').height(win -header + nav - footer);

Solution:

Cause:

When the keyboard is put down, the height of the iframe is not reset.

Option ①: Put the height of the first iframe in the cookie

Note: In Xiaomi 6, 'win' seems to conflict, so change it to '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;
}

Related recommendations:

What are the operations of border removal and borderless iframe

How to use iframe to embed other web pages in the current web page

HTML prevents iframe from jumping to the page and uses iframe to embed the WeChat web version in the page.

The above is the detailed content of The iframe content becomes blank after the keyboard pops up on the WeChat page. For more information, please follow other related articles on the PHP Chinese website!