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

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

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

自己做技術的初衷；

自己的技術成長之路；

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

廢話不多說。來正菜。

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

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

IE6-7使用濾鏡；

opcity；

rgba；

但是他們也有些細微的差別總結如下：

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

第一個是opcity和rgab的區別

第二張是在ie6中的效果：

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

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

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

點擊按鈕，呼起系統的發送短信的窗口，并且自動填充發送到的號碼和內容；

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

點擊我發送短信

點擊我發送短信

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

上面的原因是在生產環境遇到的問題。剛開始因為找不到相關可以查閱的文檔只能不做兼容。偶然一次在 stackoverflow 發現了問題的原因。

原文內容如下：

翻譯后總結如下：

所以，如果在生產環境中有呼起系統發件箱并且填充號碼和內容的請注意以上的區別。

在html5中 input標簽提供給了開發者訪問系統文件的能力。說實話如果僅僅在移動端的系統瀏覽器中使用input控件真的沒有發現什么問題。但是在app的**webview**中卻處處是坑。以下是總結出的一些經驗。

在webview中訪問系統文件遇到的一些問題：

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

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

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

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

在開發過程曾經遇到過這樣的問題：

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

第一種解決方案：

從a頁面到z頁面跳轉的過程中，通過 GET 的方式在url中帶上這個參數；

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

第二種解決方案：

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

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

sessionStorage的優點：

因為數據是存儲在內存中，當會話結束，頁面關閉以后這些數據就會被銷毀。

html5移動端存儲的一些坑：

當然在移動端瀏覽器中使用localStorage和sessionStorage是沒有任何問題的。但是在安卓webview中卻出現了localStorage無法向移動的磁盤寫數據的問題。最后通過網絡搜索發現。在安卓上webview是默認不開啟localStorage想磁盤寫文件的權限的。所以如果需要使用localStorage的同學需要找客戶端支持。詳細信息如下：

做過一個JavaScript生成二維碼的需求。當時調研了兩個方案：

使用qrcodejs

使用jquery.qrcide

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

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

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

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

可能有人會說，“臥槽，為什么要這么搞，當初誰這么設計的。。。”或者是“讓客戶端同學發版，用客戶端自己的返回不就解決問題了么”。

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

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

其實這里的難點是怎么把js字符串轉化為可執行的js代碼。

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

由上面的代碼可以知道，eval可以把簡單的js字符串轉化為js代碼并且執行它。但是當我們的js字符串比較復雜呢？比如下面這樣：

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

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

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

JavaScript中new 關鍵字的使用

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

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

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

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

來看一個比較常見的布局

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

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

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

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

當然是可以的，就是為內容容器設置一個padding-bottom它的值就是底部footer的高度,如下圖：

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

padding-bottom和footer重合。但是footer永遠不會覆蓋內容區域的內容。這時頁面會出現滾動條。可能我們最初的設計是為了用戶體驗不讓用戶的屏幕出現滾動條，但是還是那句話沒有十全十美的程序，在一些小眾機型上為了保證頁面的正常顯示保證用戶正常瀏覽我們只能犧牲一下這樣的用戶體驗了。

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

解決辦法：

思路很簡單，就是檢測輸入框的focus事件，當輸入框獲取焦點的時候，用js去把頁面滾動一下。最好維護一個系統無法正常推起輸入框的軟件列表（可以通過HTTP的UA來獲取軟件的唯一標識）。如果可以使用系統默認的滾動就用系統的，如果不可以再人為的調用js干預。

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);
            });
    }
}