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