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
IOS之禁用UIWebView的默认交互行为的更多相关文章
- 【转载】IOS之禁用UIWebView的默认交互行为
原文地址 :IOS之禁用UIWebView的默认交互行为 http://my.oschina.net/hmj/blog/111344 UIKit提供UIWebView组件,允许开发者在App中嵌入We ...
- 【iOS开发】UIWebView与JavaScript(JS) 回调交互
------------------------------------------------- 很多关于objc 与 js 交互的文章都比较适用于 mac开发,iOS的webview 还是有所不一 ...
- iOS中使用UIWebView与JS进行交互
iOS中使用UIWebView与JS进行交互 前一段忙着面试和复习,这两天终于考完试了,下学期的实习也有了着落,把最近学的东西更新一下,首先是使用UIWebView与JS进行交互 在webView中我 ...
- UIWebview与js交互[转]
UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS ...
- iOS下JS与原生的交互二
本篇主要讲的是UIWebView和JS的交互,UIWebView和JS交互的详解https://www.cnblogs.com/llhlj/p/6429431.html 一. WKWebView调用J ...
- paip.禁用IKAnalyzer 的默认词库.仅仅使用自定义词库.
paip.禁用IKAnalyzer 的默认词库.仅仅使用自定义词库. 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http:// ...
- paip..禁用mmseg 的默认词库. . 仅仅使用自定义词库from数据库.
paip..禁用mmseg 的默认词库. . 仅仅使用自定义词库from数据库. mmseg默认词库只能是文件格式...不好维护..要是不个词库放的个数据库里面走好维护兰.. 要实现2个目标..: 1 ...
- C++11之使用或禁用对象的默认函数
[C++11之使用或禁用对象的默认函数] C++11 允许显式地表明采用或拒用编译器提供的内置函数.例如要求类型带有默认构造函数,可以用以下的语法: 另一方面,也可以禁止编译器自动产生某些函数.如下面 ...
- Xcode6 UIWebView与JavaScript交互（issue fix）
这篇文章中,有介绍UIWebView与JavaScript交互,在UIWebView截获JavaScript请求处理.从app的角度,这是JavaScript的Hook请求. 在Xcode6之前的Ap ...
随机推荐
- Springboot 版本+ jdk 版本 + Maven 版本的匹配
Spring boot 版本 Spring Framework jdk 版本 maven 版本 1.2.0 版本之前 6 3.0 1.2.0 4.1.3+ 6 3.2+ 1.2.1 4.1.3+ 7 ...
- 容器 What, Why, How
学习任何东西都可以按照3W的框架进行,容器技术也是一样,先回答 What.Why 和 How 这三个问题. What - 什么是容器? 容器是一种轻量级.可移植.自包含的软件打包技术,使应用程序可以在 ...
- 12深入理解C指针之---指针多层间接引用
该系列文章源于<深入理解C指针>的阅读与理解,由于本人的见识和知识的欠缺可能有误,还望大家批评指教. 一.指针多层引用 1.定义:指针可以用不同的间接引用层级,通常使用多重指针或字符数组来 ...
- postgresql 10 分页
示例: select * from test limit 2 offset 2; limit:指查多少条数据 offset:从下标多少开始查,下标从0开始,不能为负数. offset计算公式: var ...
- AC日记——丢瓶盖 洛谷 P1316
题目描述 陶陶是个贪玩的孩子,他在地上丢了A个瓶盖,为了简化问题,我们可以当作这A个瓶盖丢在一条直线上,现在他想从这些瓶盖里找出B个,使得距离最近的2个距离最大,他想知道,最大可以到多少呢? 输入输出 ...
- BZOJ 1044 木棍分割（二分答案 + DP优化）
题目链接 木棍分割 1044: [HAOI2008]木棍分割 Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 3830 Solved: 1453[S ...
- POI2004
11th Polish Olympiad in Informatics(POI2004) <br > 填坑计划第二弹......把这个没填完的坑搬过来啦~ 上次勉强填完NEERC的坑... ...
- 【IntelliJ IDEA】idea显示工具栏
idea显示工具栏 在view->勾选对应按钮即可
- Weblogic内存溢出及常用参数配置
http://www.360doc.com/content/14/0306/14/16134804_358216319.shtml 一.WebLogic内存溢出 最近访问量门户访问量突然增大, ...
- 我们为什么要把Dagger2,MVP以及Rxjava引入项目中?
1Why? 我们为什么要把Dagger2,MVP以及Rxjava引入项目中? 毫无疑问在Android开发圈中这三个技术是经常被提及的,如此多的文章和开源项目在介绍他们,使用他们,开发者也或多或少的被 ...