IOS Webview 禁用互動行為

2021-08-08 02:53:25 字數 2266 閱讀 3679

常見預設互動行為

用過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.禁用整個頁面的使用者選擇和鏈結彈出框,可頁面樣式表中新增如下樣式規則 

body

.disable-default-action

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

<

body

class

= "disable-default-action"

>

page content….

body

>

2.只允許form表單域執行文字的剪下板操作,新增如下規則 

*:not(input,textarea)
3.禁用某個鏈結的長按彈出框,可在鏈結新增內聯樣式規則如下 

<

ahref

=""style

= "-webkit-touch-callout:none"

>

4.以程式設計方式動態的向載入頁面新增樣式來達到同樣的效果 

實現uiwebviewdelegate協議,在webviewdidfinishload:方法中新增以下** 

- (void)webviewdidfinishload

:(uiwebview *)webview

一點補充

uiwebview類中有有乙個名為scalespagetofit的bool屬性,該屬性指定當web頁面與uiwebview的大小不一致時,是否縮放web頁面來使用 

uiwebview

元件的大小。預設值為no,即忽略web頁面與webview元件的大小關係,以頁面的原始大小進行顯示,不執行任何縮放。有時為了保證內容出現滾動條,要確保html頁面的大小與webview元件的大小的一致性,同時設定webview.scrollview.scrollenabled  = no . 

通過以上的幾點,對於載入展示簡單的html頁面,基本上我們可以達到"以假亂真"的效果了。 

ios webView去載入靜態的html

直接上 獲取webview uiwebview webview uiwebview self.view 設定 webview.delegate self 建立乙個url物件,和pathforresource差不多前面是檔名,後面是字尾 nsurl url nsbundle mainbundle ur...

iOS webview與H5的互動

元件採用私有 cocoapods 來實現,並採用了 local pods 的方式,可以在本地不提交 的情況下,元件與呼叫方實現除錯。元件間的頁面間跳轉支援 openurl 的方式,由 oneroute 模組進行管理,頁面在 void load 方法中完成註冊,oneroute 內部儲存乙份 url ...

ios webview自適應實際內容高度4種方法

有的時候會碰見類似的苦逼需求,webview自適應實際內容高度 下面有四種方法供使用 方法1 獲取webview中scrovllview的contentsize進行設定 1 2 3 4 5 6 void webviewdidfinishload uiwebview webview 方法2 執行js語...