IOS之禁用UIWebView的默认交互行为
本文转载至 http://my.oschina.net/hmj/blog/111344
常见默认交互行为
用过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
最新文章
- Power BI官方视频(2) Power BI嵌入到应用中的3种方法
- Swift 06.Closures
- 免费web api接口大全
- php根据经纬度计算距离和方向--摘录自http://haotushu.sinaapp.com/post-520.html
- [转] 详细整理:UITableView优化技巧
- 用MVC4练习,后台用aspx,数据库DemoDb《MvcUserDemo》
- quartz.net持久化和集群
- zoom的学习
- H5水果机,一个网络版的lao hu ji
- 【Centos 7】使用screen恢复终端连接
- python科学计算库的numpy基础知识,完美抽象多维数组(原创)
- RHEL7恢复root密码
- 【转】Linux中包管理与定时任务
- day1-python简介+安装
- 常用模块xml,shelve,configparser,hashlib
- php调java接口
- 好用的eclipse properties插件
- 用opencv检测人眼并定位瞳孔位置
- media(适配)
- 将变量做为一个对象的key,push新增进一个数组
热门文章
- C# 实现图像快速 水平 垂直 翻转
- 【POJ3498】March of the Penguins(最大流,裂点)
- Android添加永不休眠选项
- upper_bound()和lower_bound()
- ScrollView 嵌套WebView 的问题优化
- js -“=”“==”和“===”的区别
- 微信小程序踩坑之一[wx.request]请求模式
- Codeforces 629 A. Far Relative’s Birthday Cake
- Cef应用程序结构
- sqlalchemy如何实现时间列自动更新?