標籤：
原文地址 ：IOS之禁用UIWebView的預設互動行為 http://my.oschina.net/hmj/blog/111344
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.禁用整個頁面的使用者選擇和連結彈出框，可頁面樣式表中添加如下樣式規則
| 12345 | body.disable-default-action{ -webkit-touch-callout:none ; -webkit-user-select:none ;} |
同時在body標籤中加入該類型,如
?| 123 | <body class = "disable-default-action"> page content….</body> |
2.只允許Form表單域執行文本的剪下板操作，添加如下規則
?| 1234 | *: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:方法中添加以下代碼
| 1234567 | - (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頁面，基本上我們可以達到"以假亂真"的效果了。
StackOverflow相關討論: Disabling user selection in UIWebView
Apple Webkit 手冊:CSS
CSS :not() 參考
注:描述於IOS6.1
【轉載】IOS之禁用UIWebView的預設互動行為
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
