本文转载至 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.禁用整个页面的用户选择和链接弹出框，可页面样式表中添加如下样式规则

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页面，基本上我们可以达到"以假乱真"的效果了。

StackOverflow相关讨论: Disabling user selection in UIWebView

Apple Webkit 手册:CSS
CSS :not() 参考

注:描述于IOS6.1

IOS之禁用UIWebView的默认交互行为的更多相关文章

  1. 【转载】IOS之禁用UIWebView的默认交互行为

    原文地址 :IOS之禁用UIWebView的默认交互行为 http://my.oschina.net/hmj/blog/111344 UIKit提供UIWebView组件,允许开发者在App中嵌入We ...

  2. 【iOS开发】UIWebView与JavaScript(JS) 回调交互

    ------------------------------------------------- 很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一 ...

  3. iOS中使用UIWebView与JS进行交互

    iOS中使用UIWebView与JS进行交互 前一段忙着面试和复习,这两天终于考完试了,下学期的实习也有了着落,把最近学的东西更新一下,首先是使用UIWebView与JS进行交互 在webView中我 ...

  4. UIWebview与js交互[转]

    UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...

  5. iOS下JS与原生的交互二

    本篇主要讲的是UIWebView和JS的交互,UIWebView和JS交互的详解https://www.cnblogs.com/llhlj/p/6429431.html 一. WKWebView调用J ...

  6. paip.禁用IKAnalyzer 的默认词库.仅仅使用自定义词库.

    paip.禁用IKAnalyzer 的默认词库.仅仅使用自定义词库. 作者Attilax  艾龙,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http:// ...

  7. paip..禁用mmseg 的默认词库. . 仅仅使用自定义词库from数据库.

    paip..禁用mmseg 的默认词库. . 仅仅使用自定义词库from数据库. mmseg默认词库只能是文件格式...不好维护..要是不个词库放的个数据库里面走好维护兰.. 要实现2个目标..: 1 ...

  8. C++11之使用或禁用对象的默认函数

    [C++11之使用或禁用对象的默认函数] C++11 允许显式地表明采用或拒用编译器提供的内置函数.例如要求类型带有默认构造函数,可以用以下的语法: 另一方面,也可以禁止编译器自动产生某些函数.如下面 ...

  9. Xcode6 UIWebView与JavaScript交互（issue fix）

    这篇文章中,有介绍UIWebView与JavaScript交互,在UIWebView截获JavaScript请求处理.从app的角度,这是JavaScript的Hook请求. 在Xcode6之前的Ap ...

随机推荐

  1. FOJ Problem 2261 浪里个浪

                                                                                                        ...

  2. 基于promise和script标签的jsonp

    function Jsonp(url){ var url=url.indexOf('?')>-1?url+"&callback=callback":url+" ...

  3. C语言中的bool类型

    C99中提供了一个头文件 <stdbool.h> 定义了bool代表_Bool,true代表1,false代表0.只要导入 stdbool.h ,就能非常方便的操作布尔类型了. 代码如下: ...

  4. dedecms--二次开发文章内容页未登录禁止访问和同一个帐号只允许一个ip登录

    最近在用dedecms二次开发会员功能,领导要求,会员未登录不允许访问文章内容页,和同一个账号只允许一个ip登录,我是将这两个在一起判断的,判断session存不存在,不存在的情况下就是未登录,这时候 ...

  5. Day 18 函数之一

    函数参数: 1.形参变量只有在被调用时才分配内存单元,在调用结束时,即刻释放所分配的内存单元.因此,形参只在函数内部有效.函数调用结束返回主调用函数后则不能再使用该形参变量 2.实参可以是常量.变量. ...

  6. hdu 2078(DFS)

    Matrix Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 3845   Accepted: 1993 Descriptio ...

  7. Codeforces 691E Xor-sequences

    矩阵快速幂.递推式:dp[k][i]=sum(dp[k-1][j]*f[i][j]),dp[k][i]表示的意义是序列中有k个元素,最后一个元素是i的方案数,f[i][j]=1表示i与j能放在一起,反 ...

  8. Jmeter(四十九)_常用的性能测试监听器

    概述 jmeter中提供了很多性能数据的监听器,我们通过监听器可以来分析性能瓶颈 本文以500线程的阶梯加压测试结果来描述图表. 常用监听器 1:Transactions per Second 监听动 ...

  9. 再次了解android中屏幕尺寸，单位等

    android设备多种多样,要让你的app能够适配所有的屏幕是一件很痛苦的事情,在做适配之前我们首先需要了解android中dimension的定义 android中dimension是如何定义的? ...

  10. java计算年龄

    精确到天计算年龄 public static int getAgeByCardId(String card) throws Exception { Integer len = card.length( ...