Maison > interface Web > js tutoriel > Le contenu de l'iframe devient vide une fois que le clavier apparaît sur la page WeChat

Le contenu de l'iframe devient vide une fois que le clavier apparaît sur la page WeChat

小云云
Libérer: 2018-02-12 09:13:27
original
1613 Les gens l'ont consulté

Cet article partage principalement avec vous la solution au problème selon lequel le contenu de l'iframe devient vide après l'apparition du clavier sur la page WeChat. Lorsque le clavier apparaît, le pied de page est également relevé ; et lorsque la recherche est terminée (la page entière doit être actualisée), une fois le clavier rétracté, l'endroit où se trouve le clavier dans l'iframe devient blanc.

Avant-propos :

Parce que l'iframe doit être adapté, il faut donc calculer la hauteur

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

Solution :

Cause :

Lorsque le clavier est posé, la hauteur de l'iframe n'est pas réinitialisée.

Option ① : Mettez la hauteur de la première iframe dans le cookie

Remarque : Dans Xiaomi 6, « win » semble être en conflit, alors remplacez-le par « 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;
}
Copier après la connexion

Recommandations associées :

Quelles sont les opérations des iframes sans frontières et sans frontières

Comment utiliser iframe pour intégrer d'autres pages Web dans la page Web actuelle

HTML empêche iframe d'accéder à la page et utilise iframe pour intégrer la version Web de WeChat dans la page. Explication détaillée

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal