常見預設互動行為
用過uiwebview元件的開發者都知道,當uiwebview載入顯示html頁面時,元件本身提供了一些系統預設的互動行為,這些預設行為包括:
1.長按文字區域顯示文字放大鏡,選擇指定區域的網頁內容,包括文字和,執行複製,貼上等
2.長按鏈結物件撥出彈窗框,執行頁面跳轉或儲存等
對於移動終端來說,因缺少pc機下的鍵盤滑鼠,而只是依賴有限的可被識別的那幾種手勢來進行操作,極大的限制了互動的靈活性。例如我們要儲存網頁內的某張,利用滑鼠右鍵彈出選單的「儲存」很快的能完成這個互動,相反在移動端的ipad上,一時會不知所措,因此,這才出現了像以上提到的第二種互動行為用以儲存。所以這些系統行為更加方便使用者瀏覽web頁面,同時也為uiwebview元件貼上了乙個醒目的標籤。
禁用預設的互動行為
實際的開發工作中,有時我們希望盡量讓uiwebview元件的網頁內容無論從外觀還是互動上來說都更見接近原生元件,因此這些系統預設行為就成為了我們達到該效果的障礙。還好通過webkit核心提供的一些特殊的css屬性 ,我們可以很方便的禁用掉這些預設的行為。首先我們介紹兩個特殊的css屬性
-webkit-touch-callou
t(ios2.0及以後可用)
長按諸如鏈結的目標物件時,是否允許呼出缺省的popover,當前選擇值包括:
none:不呼出彈窗框
inherit:可以撥出彈窗框
在ios中,當你touch和hold乙個觸控物件時,例如鏈結,safari會顯示乙個包含鏈結資訊的彈出框。該屬性允許你來禁用這個彈出框。
-webkit-user-select
(ios3.0及以後可用)
是否允許使用者選擇元素的內容,選擇值包括:
auto:使用者可以選擇元素內的內容
none:使用者不能選擇任何內容
text:使用者只能選擇元素內的文字
通過屬性的名稱和簡單的描述,可能我們已經清楚的知道下一步該怎麼做。假設我們要載入的html頁面為mypage.html,該頁面包含了文字,鏈結和等等,我們以此為前提用簡單的**說明,
1.禁用整個頁面的使用者選擇和鏈結彈出框,可頁面樣式表中新增如下樣式規則
1
body.disable-default-action
2
同時在body標籤中加入該型別,如
1
<
body
class
=
"disable-default-action"
>
2
page content….
3
2.只允許form表單域執行文字的剪下板操作,新增如下規則
1
*:not(input,textarea)
3.禁用某個鏈結的長按彈出框,可在鏈結新增內聯樣式規則如下
1
<
a
href
=
""
style
=
"-webkit-touch-callout:none"
>
4.以程式設計方式動態的向載入頁面新增樣式來達到同樣的效果
實現uiwebviewdelegate協議,在webviewdidfinishload:方法中新增以下**
1
- (
void
)webviewdidfinishload:(uiwebview *)webview
一點補充
uiwebview類中有有乙個名為scalespagetofit的bool屬性,該屬性指定當web頁面與uiwebview的大小不一致時,是否縮放web頁面來使用
uiwebview
元件的大小。預設值為no,即忽略web頁面與webview元件的大小關係,以頁面的原始大小進行顯示,不執行任何縮放。有時為了保證內容出現滾動條,要確保html頁面的大小與webview元件的大小的一致性,同時設定webview.scrollview.scrollenabled = no .
通過以上的幾點,對於載入展示簡單的html頁面,基本上我們可以達到"以假亂真"的效果了。
stackoverflow相關討論:
disabling user selection in uiwebview
css :not() 參考
注:描述於ios6.1
IOS開發之UIWebView實際應用(一)
最近做專案,需要展示數量的樓層,樓層中有語音 靜態 動態和大量的文字其中的一樣或多樣同時出現以及 混排等等,而且有些樓層還超級長,在需求上來看還需要設定顯示字型的大小,更改主題模式等。看到這些需求,想到第乙個方案是uitableview,但是如果cell的高度超出螢幕可視範圍很多倍的話,uitabl...
iOS開發UIWebView快取
最近做了uiwebview的快取,用了兩種方式去實現 第一種使用的是重寫uiwebview的urlcache方法,在urlcache方法中請求網頁資料,儲存網頁資料至本地磁碟。使用rncachingurlprotocol協議 優點 不會像第一種方式會在每次使用快取的時候產生兩個相同的請求,缺點 會快...
iOS 檢測 UIWebView引用
自從2020開始,蘋果不再允許使用uiwebview,檢測專案中引用uiwebview 1.開啟終端,cd 到專案的工程檔案所在的路徑 2.輸入以下命令,注意最後有個.點號 grep r uiwebview 3.以上操作都正確的話,會馬上出現工程中帶有 uiwebview 的檔案的列表 包括在工程中...