原文地址 ：IOS之禁用UIWebView的默认交互行为 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的默认交互行为

    本文转载至 http://my.oschina.net/hmj/blog/111344       UIKit提供UIWebView组件,允许开发者在App中嵌入Web页面.通过UIWebView组件 ...

  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. 【SQLSERVER学习笔记】分页存储过程+调用

    USE [数据库名] GO SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO CREATE PROCEDURE [dbo].[存储过程名] @pageI ...

  2. LeetCode 中级 - 组合总和II(105)

    给定一个数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的每个数字在每个组合中只能使用一次. ...

  3. tomcat启动startup.bat一闪而过【亲测有效】

    遇到很多次运行startup.bat后,一个窗口一闪而过的问题,但是从来没去纠正怎样修改配置才是正确的,现在从网上查阅的资料整理如下:tomcat在启动时,会读取环境变量的信息,需要一个CATALIN ...

  4. chromium之ref_counted

    namespace subtle { class RefCountedBase { protected: RefCountedBase(); ~RefCountedBase(); void AddRe ...

  5. mybatis使用*号查询数据丢失问题

    使用*号的SQL语句:select * from 表名 在开发过程中可能你会发现使用mybatis框架爱作为持久层时,写的SQL语句在工具里面查询数据是可以查到想要的数据的,但是在项目中会出现数据丢失 ...

  6. awk命令用法

    awk:把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理,是一个强大的文本分析工具,在对数据分析并生成报告时很有优势. awk有3个不同版本: awk.nawk和gawk, ...

  7. 【读书笔记 - Effective Java】01. 考虑用静态工厂方法代替构造器

    获取类的实例有两种方法: 1. 提供一个公有的构造器(最常用). 2. 提供一个公有的静态工厂方法(static factory method). // 静态工厂方法示例 public static ...

  8. Flask之Flask实例有哪些参数

    常用的参数应用实例 from flask import Flask, render_template, url_for, session, request, redirect app = Flask( ...

  9. TypeScript 运算符

    应用场景(待完善) 位运算符 运算符 描述 例子 类似于 结果 十进制 & AND,按位与处理两个长度相同的二进制数,两个相应的二进位都为 1,该位的结果值才为 1,否则为 0. x = 5 ...

  10. 【Java】abstract,final,static,private,protected,public的区别

    [abstract]抽象的 1. abstract可以修饰类和成员方法,被abstract修饰的类称为抽象类,被abstract修饰成员方法叫抽象方法.抽象类不一定有抽象方法,但拥有抽象方法的类一定是 ...