IOS之禁用UIWebView的默認交互行爲

本文轉載至 http://my.oschina.net/hmj/blog/111344

IOS UIWebView

 

      UIKit提供UIWebView組件，容許開發者在App中嵌入Web頁面。經過UIWebView組件，咱們能夠在應用中很方便的嵌入HTML頁面。在利用IOS原生的組件進行界面開發時，界面UI元素的佈局須要咱們去一點點的計算，尤爲是對於複雜點的圖文混排的內容來講，這種計算有時很讓人頭痛。與原生組件相比，HTML自己的結構性語義性較強，利用CSS能更加方便快捷的進行內容佈局和美化，同時Javascript能夠爲頁面添加所需的交互動做和處理邏輯。所以利用HTML/CSS/Javascript在界面上添加那些低交互性純展現性的內容有時是比較好的選擇，雖然這可能增長了學習的成本，但如今基本上每一個開發人員都或多或少的學習和使用過這些前臺技術，更況且對於那些從傳統前端開發轉至移動端開發的人員，這些學習成本基本能夠忽略不計。 

常見默認交互行爲 

      用過UIWebView組件的開發者都知道，當UIWebView加載顯示HTML頁面時，組件自己提供了一些系統默認的交互行爲，這些默認行爲包括: 

        1.長按文本區域顯示文字放大鏡，選擇指定區域的網頁內容，包括文字和圖片,執行復制，粘貼等 

         
 

        2.長按連接對象呼出彈窗框，執行頁面跳轉或保存圖片等 
              

     對於移動終端來講，因缺乏PC機下的鍵盤鼠標，而只是依賴有限的可被識別的那幾種手勢來進行操做，極大的限制了交互的靈活性。例如咱們要保存網頁內的某張圖片，利用鼠標右鍵彈出菜單的「保存圖片」很快的能完成這個交互，相反在移動端的iPad上，一時會不知所措，所以，這纔出現了像以上提到的第二種交互行爲用以保存圖片。因此這些系統行爲更加方便用戶瀏覽Web頁面，同時也爲UIWebview組件貼上了一個醒目的標籤。 

禁用默認的交互行爲 

       實際的開發工做中，有時咱們但願儘可能讓UIWebView組件的網頁內容不管從外觀仍是交互上來講都更見接近原生組件，所以這些系統默認行爲就成爲了咱們達到該效果的障礙。還好經過Webkit內核提供的一些特殊的CSS屬性 ，咱們能夠很方便的禁用掉這些默認的行爲。首先咱們介紹兩個特殊的CSS屬性 

         -webkit-touch-callout(IOS2.0及之後可用) 

            長按諸如連接的目標對象時，是否容許呼出默認的popOver，當前選擇值包括: 
                none:不呼出彈窗框 
                inherit:能夠呼出彈窗框 

        在IOS中，當你touch和hold一個觸控對象時，例如連接，Safari會顯示一個包含連接信息的彈出框。該屬性容許你來禁用這個彈出框。 

         -webkit-user-select(IOS3.0及之後可用) 

            是否容許用戶選擇元素的內容，選擇值包括： 

            auto:用戶能夠選擇元素內的內容 
            none:用戶不能選擇任何內容 
            text:用戶只能選擇元素內的文本 

      經過屬性的名稱和簡單的描述，可能咱們已經清楚的知道下一步該怎麼作。假設咱們要加載的HTML頁面爲myPage.html，該頁面包含了文字，連接和圖片等等，咱們以此爲前提用簡單的代碼說明， 

        1.禁用整個頁面的用戶選擇和連接彈出框，可頁面樣式表中添加以下樣式規則 

?

1 2 3 4 5

body.disable-default-action {      -webkit-touch-callout: none ;      -webkit-user-select: none ; }

        同時在body標籤中加入該類型,如 

?

1 2 3

< body class = "disable-default-action" >      page content…. </ body >

        2.只容許Form表單域執行文本的剪切板操做，添加以下規則 

?

1 2 3 4

*:not(input,textarea) {      -webkit-touch-callout: none ;      -webkit-user-select: none ; }

       3.禁用某個連接的長按彈出框,可在連接添加內聯樣式規則以下 

?

1	< a href = "http://www.baidu.com" style = "-webkit-touch-callout:none" >

       4.以編程方式動態的向加載頁面添加樣式來達到一樣的效果 

        實現UIWebviewDelegate協議，在webViewDidFinishLoad:方法中添加如下代碼 

?

1 2 3 4 5 6 7

- ( void )webViewDidFinishLoad:(UIWebView *)webView {     // 禁用用戶選擇     [webView stringByEvaluatingJavaScriptFromString:@ "document.documentElement.style.webkitUserSelect='none';" ];          // 禁用長按彈出框     [webView stringByEvaluatingJavaScriptFromString:@ "document.documentElement.style.webkitTouchCallout='none';" ]; }

一點補充        UIWebview類中有有一個名爲scalesPageToFit的BOOL屬性，該屬性指定當web頁面與UIWebView的大小不一致時，是否縮放web頁面來使用 UIWebView組件的大小。默認值爲NO，即忽略web頁面與webview組件的大小關係，以頁面的原始大小進行顯示，不執行任何縮放。有時爲了保證內容出現滾動條，要確保HTML頁面的大小與webview組件的大小的一致性，同時設置webview.scrollView.scrollEnabled  = NO .  經過以上的幾點，對於加載展現簡單的HTML頁面，基本上咱們能夠達到"以假亂真"的效果了。