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

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

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

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

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

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

廢話不多說。來正菜。

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

首先來看一個背景透明的問題，背景透明有三種解決方案：

IE6-7使用濾鏡；

opcity；

rgba；

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

示例效果如下（如果可以的話，自己可以寫一個簡單的demo看下效果）：

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

第二張是在ie6中的效果：

當(dāng)我們在兼容低版本瀏覽器的時候可能下面的寫法可以滿足我們的需求（兩個屬性都寫上，瀏覽器識別的屬性直接覆蓋前者的屬性）：

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

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

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

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

點擊我發(fā)送短信

點擊我發(fā)送短信

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

上面的原因是在生產(chǎn)環(huán)境遇到的問題。剛開始因為找不到相關(guān)可以查閱的文檔只能不做兼容。偶然一次在 stackoverflow 發(fā)現(xiàn)了問題的原因。

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

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

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

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

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

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

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

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

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

在開發(fā)過程曾經(jīng)遇到過這樣的問題：

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

第一種解決方案：

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

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

第二種解決方案：

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

這樣解決問題不僅減少了很大的工作量，也解決了工作量大會遺漏的問題。

sessionStorage的優(yōu)點：

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

html5移動端存儲的一些坑：

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

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

使用qrcodejs

使用jquery.qrcide

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

所以在前端有需求做生成二維碼需求的時候，可以參考以上的兩個點，確定自己選擇哪個開源庫更適合自己的項目。

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

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

可能有人會說，“臥槽，為什么要這么搞，當(dāng)初誰這么設(shè)計的。。?！被蛘呤恰白尶蛻舳送瑢W(xué)發(fā)版，用客戶端自己的返回不就解決問題了么”。

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

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

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

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

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

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

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

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

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

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

那么使用new Function怎么解決上面的問題呢？請看示例代碼：

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

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

來看一個比較常見的布局

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

那我們怎么解決這個問題呢？我看到在我們項目的源代碼中是通過js給footer和內(nèi)容區(qū)域所在的父容器設(shè)置一個最小的高度來解決這個為題的，這樣做不好。除了會增加復(fù)雜的判斷也會造成頁面的重繪：

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

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

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

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

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

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

解決辦法：

思路很簡單，就是檢測輸入框的focus事件，當(dāng)輸入框獲取焦點的時候，用js去把頁面滾動一下。最好維護(hù)一個系統(tǒng)無法正常推起輸入框的軟件列表（可以通過HTTP的UA來獲取軟件的唯一標(biāo)識）。如果可以使用系統(tǒng)默認(rèn)的滾動就用系統(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);
            });
    }
}