Heim > Web-Frontend > js-Tutorial > Der Iframe-Inhalt wird leer, nachdem die Tastatur auf der WeChat-Seite angezeigt wird

Der Iframe-Inhalt wird leer, nachdem die Tastatur auf der WeChat-Seite angezeigt wird

小云云
Freigeben: 2018-02-12 09:13:27
Original
1613 Leute haben es durchsucht

Dieser Artikel teilt Ihnen hauptsächlich die Lösung des Problems mit, dass der Iframe-Inhalt leer wird, nachdem die Tastatur auf der WeChat-Seite angezeigt wird. Wenn die Tastatur eingeblendet wird, wird auch die Fußzeile nach oben verschoben. Wenn die Suche abgeschlossen ist (die gesamte Seite muss aktualisiert werden), wird die Stelle, an der sich die Tastatur im Iframe befindet, weiß.

Vorwort:

Da der Iframe angepasst werden muss, muss die Höhe berechnet werden

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

Lösung:

Ursache:

Beim Ablegen der Tastatur wird die Höhe des Iframes nicht zurückgesetzt.

Option ①: Geben Sie die Höhe des ersten Iframes in das Cookie ein

Hinweis: In Xiaomi 6 scheint „win“ in Konflikt zu geraten, also ändern Sie es in „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;
}
Nach dem Login kopieren

Verwandte Empfehlungen:

Was sind die Operationen von randlosen und randlosen Iframes?

So verwenden Sie Iframe, um andere Webseiten in die aktuelle Webseite einzubetten

HTML verhindert, dass Iframe zur Seite springt und verwendet Iframe, um die WeChat-Webversion einzubetten auf der Seite. Ausführliche Erklärung

Das obige ist der detaillierte Inhalt vonDer Iframe-Inhalt wird leer, nachdem die Tastatur auf der WeChat-Seite angezeigt wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage