摘要：主要原因是除了安卓和系統(tǒng)的寫(xiě)法不同外，不同系統(tǒng)版本寫(xiě)法也不同。在安卓上是默認(rèn)不開(kāi)啟想磁盤(pán)寫(xiě)文件的權(quán)限的。最好維護(hù)一個(gè)系統(tǒng)無(wú)法正常推起輸入框的軟件列表可以通過(guò)的來(lái)獲取軟件的唯一標(biāo)識(shí)。

看了下博客的更新時(shí)間，發(fā)現(xiàn)9月份一篇也沒(méi)有更新。一直想著都要抽時(shí)間寫(xiě)一篇的，不然今年的更新記錄就會(huì)斷在了9月份。但是還是應(yīng)為各種各樣的事情給耽擱了。當(dāng)內(nèi)心突然涌起一股必須寫(xiě)點(diǎn)什么的時(shí)候，突然發(fā)現(xiàn)自己把寫(xiě)博客的“套路”都忘了。(●′ω｀●)φ

一直認(rèn)為自己還是一個(gè)比較熱愛(ài)思考的人。最近一直在思考兩個(gè)問(wèn)題：

自己做技術(shù)的初衷；

自己的技術(shù)成長(zhǎng)之路；

當(dāng)然這兩篇文章自己也在潤(rùn)色之中，相信很快會(huì)跟大家見(jiàn)面。

廢話不多說(shuō)。來(lái)正菜。

好吧。至從自己到了新的工作環(huán)境以后，開(kāi)發(fā)環(huán)境又從只需要兼容 IE8 以上回到了必須兼容 IE6 瀏覽器上來(lái)。所以在第一次做項(xiàng)目的時(shí)候，還是遇到一些兼容低版本IE瀏覽器的問(wèn)題。

首先來(lái)看一個(gè)背景透明的問(wèn)題，背景透明有三種解決方案：

IE6-7使用濾鏡；

opcity；

rgba；

但是他們也有些細(xì)微的差別總結(jié)如下：

示例效果如下（如果可以的話，自己可以寫(xiě)一個(gè)簡(jiǎn)單的demo看下效果）：

第一個(gè)是opcity和rgab的區(qū)別

第二張是在ie6中的效果：

當(dāng)我們?cè)诩嫒莸桶姹緸g覽器的時(shí)候可能下面的寫(xiě)法可以滿足我們的需求（兩個(gè)屬性都寫(xiě)上，瀏覽器識(shí)別的屬性直接覆蓋前者的屬性）：

.item1{
    opacity:0.1;//IE8以上瀏覽器識(shí)別
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);//濾鏡低版本IE7-8支持
}

做html5開(kāi)發(fā)的過(guò)程中，我們可能會(huì)有這樣的需求：

點(diǎn)擊按鈕，呼起系統(tǒng)的發(fā)送短信的窗口，并且自動(dòng)填充發(fā)送到的號(hào)碼和內(nèi)容；

網(wǎng)絡(luò)上可以很容易的找到這方面的demo ，并且也可以找到在安卓上和ios上是有卻別的：

點(diǎn)擊我發(fā)送短信

點(diǎn)擊我發(fā)送短信

但是在實(shí)際的開(kāi)發(fā)過(guò)程中卻遇到了很多坑。主要原因是：
除了安卓和IOS系統(tǒng)的寫(xiě)法不同外，ios不同系統(tǒng)版本寫(xiě)法也不同。而且在不同的app中也有不同。

上面的原因是在生產(chǎn)環(huán)境遇到的問(wèn)題。剛開(kāi)始因?yàn)檎也坏较嚓P(guān)可以查閱的文檔只能不做兼容。偶然一次在 stackoverflow 發(fā)現(xiàn)了問(wèn)題的原因。

原文內(nèi)容如下：

翻譯后總結(jié)如下：

所以，如果在生產(chǎn)環(huán)境中有呼起系統(tǒng)發(fā)件箱并且填充號(hào)碼和內(nèi)容的請(qǐng)注意以上的區(qū)別。

在html5中 input標(biāo)簽提供給了開(kāi)發(fā)者訪問(wèn)系統(tǒng)文件的能力。說(shuō)實(shí)話如果僅僅在移動(dòng)端的系統(tǒng)瀏覽器中使用input控件真的沒(méi)有發(fā)現(xiàn)什么問(wèn)題。但是在app的**webview**中卻處處是坑。以下是總結(jié)出的一些經(jīng)驗(yàn)。

在webview中訪問(wèn)系統(tǒng)文件遇到的一些問(wèn)題：

觸發(fā)input后，頁(yè)面“閃退”（現(xiàn)象就是，文件選擇框出現(xiàn)后又立馬關(guān)閉）；當(dāng)初遇到這個(gè)問(wèn)題是在貼吧的客戶端中，聽(tīng)貼吧的兄弟說(shuō)，他們后來(lái)做了兼容。

華為手機(jī)中可以正常的呼起系統(tǒng)選擇文件的窗口，但是無(wú)法正常讀取系統(tǒng)文件（最后跟客戶端的同學(xué)確定，如果h5在webview中讀取系統(tǒng)文件，是需要權(quán)限的，也就是說(shuō)需要客戶端支持）；

在ios的webview中也會(huì)出現(xiàn)問(wèn)題。如果有興趣的同學(xué)可以參考這篇蘋(píng)果的開(kāi)發(fā)者文檔(點(diǎn)擊訪問(wèn)）

詳細(xì)的可以參考這篇文章一起閱讀：《h5端呼起攝像頭掃描二維碼并解析》

在開(kāi)發(fā)過(guò)程曾經(jīng)遇到過(guò)這樣的問(wèn)題：

很多個(gè)頁(yè)面，比如說(shuō)a-z。當(dāng)我在a頁(yè)面的時(shí)候，瀏覽器中的url會(huì)帶有某些參數(shù)，當(dāng)我在做完一系列的操作到達(dá)z頁(yè)面。
某天有個(gè)需求，用戶在頁(yè)面a的時(shí)候會(huì)帶上一個(gè)參數(shù)，決定用戶在z頁(yè)面做完操作后頁(yè)面最終跳向哪里。那么這個(gè)參數(shù)該怎么傳遞到z頁(yè)面呢？

第一種解決方案：

從a頁(yè)面到z頁(yè)面跳轉(zhuǎn)的過(guò)程中，通過(guò) GET 的方式在url中帶上這個(gè)參數(shù)；

這種方案是比較常規(guī)，也是比較不錯(cuò)的解決方案。但是需要在頁(yè)面中的邏輯跳都加上需要的參數(shù)。這樣工作量比較大，而且容易出現(xiàn)遺漏。不建議使用。

第二種解決方案：

使用html5新特性sessionStorage來(lái)解決問(wèn)題。在a頁(yè)面的時(shí)候，把新添加的需要傳給z頁(yè)面的參數(shù)放在sessionStorage中。在z頁(yè)面直接從sessionStorage中取需要獲取的參數(shù)值，然后決定頁(yè)面最終的跳轉(zhuǎn)。

這樣解決問(wèn)題不僅減少了很大的工作量，也解決了工作量大會(huì)遺漏的問(wèn)題。

sessionStorage的優(yōu)點(diǎn)：

因?yàn)閿?shù)據(jù)是存儲(chǔ)在內(nèi)存中，當(dāng)會(huì)話結(jié)束，頁(yè)面關(guān)閉以后這些數(shù)據(jù)就會(huì)被銷毀。

html5移動(dòng)端存儲(chǔ)的一些坑：

當(dāng)然在移動(dòng)端瀏覽器中使用localStorage和sessionStorage是沒(méi)有任何問(wèn)題的。但是在安卓webview中卻出現(xiàn)了localStorage無(wú)法向移動(dòng)的磁盤(pán)寫(xiě)數(shù)據(jù)的問(wèn)題。最后通過(guò)網(wǎng)絡(luò)搜索發(fā)現(xiàn)。在安卓上webview是默認(rèn)不開(kāi)啟localStorage想磁盤(pán)寫(xiě)文件的權(quán)限的。所以如果需要使用localStorage的同學(xué)需要找客戶端支持。詳細(xì)信息如下：

做過(guò)一個(gè)JavaScript生成二維碼的需求。當(dāng)時(shí)調(diào)研了兩個(gè)方案：

使用qrcodejs

使用jquery.qrcide

在使用的過(guò)程中還是遇到一些坑，總結(jié)如下：

所以在前端有需求做生成二維碼需求的時(shí)候，可以參考以上的兩個(gè)點(diǎn)，確定自己選擇哪個(gè)開(kāi)源庫(kù)更適合自己的項(xiàng)目。

當(dāng)看到題目的時(shí)候，可能會(huì)“一臉蒙逼”為什么要在本地存儲(chǔ)js字符串啊。好吧，有時(shí)候業(yè)務(wù)場(chǎng)景的需求確實(shí)是比較{{BANNED}}，且看我描述的一個(gè)業(yè)務(wù)場(chǎng)景。

業(yè)務(wù)場(chǎng)景：
因?yàn)闅v史的原因，我們的html5頁(yè)面是跑在客戶端的webview中，但是客戶端的titlebar上的那個(gè)返回按鈕卻是調(diào)用了前端js的back方法進(jìn)行頁(yè)面返回的。這個(gè)時(shí)候就會(huì)出現(xiàn)一個(gè)問(wèn)題，如果在我們的h5頁(yè)面中跳出了我們自己的頁(yè)面，到了第三方的頁(yè)面。第三方頁(yè)面的js肯定是沒(méi)有我們客戶端返回按鈕需要的js返回方法的。

可能有人會(huì)說(shuō)，“臥槽，為什么要這么搞，當(dāng)初誰(shuí)這么設(shè)計(jì)的。。。”或者是“讓客戶端同學(xué)發(fā)版，用客戶端自己的返回不就解決問(wèn)題了么”。

好吧，都說(shuō)了是歷史原因了其它的都不要說(shuō)，而且找客戶端同學(xué)發(fā)版也不太現(xiàn)實(shí)的情況下只能想其它的解決方案了。

之前已經(jīng)聊到過(guò)html5的客戶端存儲(chǔ)技術(shù)sessionStorage。當(dāng)然我要做的就是把那段前端的back方法存到sessionStorage中。當(dāng)加載第三方的頁(yè)面的時(shí)候直接從sessionStorage中讀取back方法的字符串，轉(zhuǎn)化為js代碼，并且賦值給客戶端調(diào)用的方法。

其實(shí)這里的難點(diǎn)是怎么把js字符串轉(zhuǎn)化為可執(zhí)行的js代碼。

使用eval執(zhí)行js代碼語(yǔ)句，看下面簡(jiǎn)單的示例：

由上面的代碼可以知道，eval可以把簡(jiǎn)單的js字符串轉(zhuǎn)化為js代碼并且執(zhí)行它。但是當(dāng)我們的js字符串比較復(fù)雜呢？比如下面這樣：

function aaa(){
    console.log(1);
}

那么使用eval函數(shù)還行不行呢？看下面的示例：

由上面的執(zhí)行結(jié)果可以知道，不管怎么執(zhí)行都得不到我們的預(yù)期的結(jié)果，但是有沒(méi)有辦法得到我們預(yù)期的結(jié)果呢？答案是：有。

JavaScript中new 關(guān)鍵字的使用

在JavaScript中一切皆是對(duì)象。當(dāng)我們創(chuàng)建一個(gè)函數(shù)的時(shí)候除了函數(shù)聲明和函數(shù)表達(dá)式外，還可以通過(guò)new Function的方式來(lái)創(chuàng)建函數(shù)（這種方式并不常用，但是特殊的場(chǎng)景還是很有用的）。

那么使用new Function怎么解決上面的問(wèn)題呢？請(qǐng)看示例代碼：

由上面的示例代碼和c的執(zhí)行結(jié)果我想很多人已經(jīng)知道怎么做了，其實(shí)只需要對(duì)b的字符串函數(shù)做一下簡(jiǎn)單的修改即可，看代碼：

上面的代碼執(zhí)行結(jié)果的b()就是我們我想要的保存的函數(shù)體。

來(lái)看一個(gè)比較常見(jiàn)的布局

上面的這個(gè)布局 因?yàn)?b>footer是相對(duì)于頁(yè)面底部絕對(duì)定位的，所以當(dāng)屏幕太小的時(shí)候會(huì)有一個(gè)問(wèn)題footer區(qū)域覆蓋了內(nèi)容區(qū)域，如下圖：

那我們?cè)趺唇鉀Q這個(gè)問(wèn)題呢？我看到在我們項(xiàng)目的源代碼中是通過(guò)js給footer和內(nèi)容區(qū)域所在的父容器設(shè)置一個(gè)最小的高度來(lái)解決這個(gè)為題的，這樣做不好。除了會(huì)增加復(fù)雜的判斷也會(huì)造成頁(yè)面的重繪：

var webViewHeight = window.innerHeight;
var iosCampatibleValue = 64;
if(webViewHeight<500){
    webViewHeight =500;
}
$("#pageWrapper").css("height", webViewHeight);

很明顯上面的代碼會(huì)造成頁(yè)面的重繪（當(dāng)然這個(gè)對(duì)系統(tǒng)性能消耗并不是那么容易感知）。但是用css可不可以解決這個(gè)問(wèn)題呢？

當(dāng)然是可以的，就是為內(nèi)容容器設(shè)置一個(gè)padding-bottom它的值就是底部footer的高度,如下圖：

當(dāng)移動(dòng)端的屏幕比較低的時(shí)候就會(huì)是下面的這種情況：

padding-bottom和footer重合。但是footer永遠(yuǎn)不會(huì)覆蓋內(nèi)容區(qū)域的內(nèi)容。這時(shí)頁(yè)面會(huì)出現(xiàn)滾動(dòng)條?？赡芪覀冏畛醯脑O(shè)計(jì)是為了用戶體驗(yàn)不讓用戶的屏幕出現(xiàn)滾動(dòng)條，但是還是那句話沒(méi)有十全十美的程序，在一些小眾機(jī)型上為了保證頁(yè)面的正常顯示保證用戶正常瀏覽我們只能犧牲一下這樣的用戶體驗(yàn)了。

現(xiàn)在大多數(shù)的安卓系統(tǒng)和ios系統(tǒng)，當(dāng)輸入框獲取焦點(diǎn)呼起系統(tǒng)鍵盤(pán)的時(shí)候，系統(tǒng)鍵盤(pán)都會(huì)將input輸入框給推上鍵盤(pán)的上方，方便用戶的輸入。但是不外乎例外，特別是在某些app中，這個(gè)本身是系統(tǒng)的操作并不生效，這個(gè)時(shí)候如果需要達(dá)到完美的用戶體驗(yàn)就需要人為的參與進(jìn)來(lái)。

解決辦法：

思路很簡(jiǎn)單，就是檢測(cè)輸入框的focus事件，當(dāng)輸入框獲取焦點(diǎn)的時(shí)候，用js去把頁(yè)面滾動(dòng)一下。最好維護(hù)一個(gè)系統(tǒng)無(wú)法正常推起輸入框的軟件列表（可以通過(guò)HTTP的UA來(lái)獲取軟件的唯一標(biāo)識(shí)）。如果可以使用系統(tǒng)默認(rèn)的滾動(dòng)就用系統(tǒng)的，如果不可以再人為的調(diào)用js干預(yù)。

function inputScroll(dom){
var tplList=["ss","bb"] ;

var tpl = $.fn.getQueryString(tpl);
    if(tplList.indexOf(tpl)){
        dom.focus(function(){
            var clientHeight = $(window).height();
            var contentHeight = clientHeight + clientHeight/2;
            var smsInputTop= $(this).offset().top;

            content.height(contentHeight);
            window.scrollTo(0,smsInputTop-76);
            });
    }
}