微信頁面彈出鍵盤后iframe內(nèi)容變空白的解決方案
更新時間：2017年09月20日 16:26:42 作者：fanfan4569
當鍵盤彈出后，頁腳也被頂起來；而當搜索完（要刷新整體頁面），鍵盤縮回后，iframe里 鍵盤當住的地方變成白色。怎么解決這個問題呢？下面腳本之家小編給大家分享微信頁面彈出鍵盤后iframe內(nèi)容變空白的解決方案，一起看看吧
當鍵盤彈出后，頁腳也被頂起來；而當搜索完（要刷新整體頁面），鍵盤縮回后，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的高度沒有再重新設(shè)置而導致的。
方案① ： 將首次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;
}
總結(jié)
以上所述是小編給大家介紹的微信頁面彈出鍵盤后iframe內(nèi)容變空白的解決方，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了JavaScript 自定義彈出窗口的實現(xiàn)代碼,實現(xiàn)一采用html編寫彈出窗口內(nèi)容,實現(xiàn)二采用JavaScript編寫彈出窗口內(nèi)容,結(jié)合示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-09-09
本篇文章主要介紹了two.js之實現(xiàn)動畫效果示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
本文介紹了javascript獲取以及設(shè)置光標位置的方法，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
JavaScript設(shè)計模式之原型模式分析【ES5與ES6】
這篇文章主要介紹了JavaScript設(shè)計模式之原型模式,簡單描述了原型模式的概念、原理,并結(jié)合實例形式分析了ES5與ES6實現(xiàn)原型模式的相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了JavaScript中window.open用法,實例分析了window.open方法的功能、參數(shù)及使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-04-04
掌握各種js調(diào)試技巧，在前端開發(fā)中降低開發(fā)成本，起到事半功倍的效果。譬如，快速定位問題、降低故障概率、幫助分析邏輯錯誤等等。這篇文章主要介紹了前端中的JS使用調(diào)試技巧,需要的朋友可以參考下2022-12-12
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)鼠標點擊冒泡特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
模塊化簡單來說就是將一個完整的長篇代碼文件根據(jù)功能進行劃分成幾個文件，這些文件各自負責一個獨立的功能，各個文件組合起來實現(xiàn)一個完整的大功能，這就是模塊化，每個負責獨立功能的文件就是模塊。2021-05-05
在Web開發(fā)中,拖拽排序是一個常見的需求,它允許用戶通過拖拽的方式重新排列列表項的順序,本文將介紹如何使用原生JavaScript實現(xiàn)這一功能,需要的可以了解下2024-01-01
javascript貪吃蛇 作者sunxing007 注釋完整，面向?qū)ο?2009-05-05