微信頁面彈出鍵盤后iframe內容變空白的解決方案
更新時間：2017年09月20日 16:26:42 作者：fanfan4569
當鍵盤彈出后，頁腳也被頂起來；而當搜索完（要刷新整體頁面），鍵盤縮回后，iframe里 鍵盤當住的地方變成白色。怎么解決這個問題呢？下面腳本之家小編給大家分享微信頁面彈出鍵盤后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內容變空白的解決方，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
JavaScript高級程序設計 讀書筆記之八 Function類及閉包
Function類及閉包，學習js的朋友可以參考下2012-02-02
這篇文章主要介紹了JS通過ajax動態(tài)讀取xml文件內容的方法,實例分析了Ajax操作XML文件的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要給大家介紹了關于ES6中箭頭函數的定義與調用方式的相關資料，文中通過示例代碼介紹的非常詳細，相信會對大家的學習或者工作帶來一定的幫助，需要的朋友們下面來一起看看吧。2017-06-06
這篇文章主要為大家詳細介紹了原生js實現點擊按鈕復制內容到剪切板，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
本文給出如何在頁面上同步顯示服務器時間的解決方案，能夠實現同步服務器時間、同步倒計時，卻不占用服務器太多資源，下面我給寫出實現的思路2015-09-09
這篇文章主要介紹了快速對接payjq的個人微信支付接口過程解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-08-08
本文詳細講解了JS數組循環(huán)的方式以及效率分析對比，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-11-11
這篇文章主要介紹了詳解es6超好用的語法糖Decorator，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了JS防抖和節(jié)流實例解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了常見瀏覽器多長時間會提示“腳本運行時間過長”總結,需要的朋友可以參考下2014-04-04