原文地址 ：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. jquery遍历数组

    示例: ajax返回的数组进行遍历 $.ajax({ type:"POST", url:"<?php echo base_url(); ?>public_re ...

  2. jquery实现顶部浮动效果

    示例: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <tit ...

  3. 一点一点看JDK源码（五）java.util.ArrayList 后篇之sort与Comparator

    一点一点看JDK源码(五)java.util.ArrayList 后篇之sort与Comparator liuyuhang原创,未经允许禁止转载 本文举例使用的是JDK8的API 目录:一点一点看JD ...

  4. Reading Notes : 180212 冯诺依曼计算机

    读书<计算机组成原理>,百度百科 现在大部分接触过计算机的人,都会知道冯诺依曼计算机,但是这个概念是怎么来的呢?本节我们就通过聊一下计算机的存储程序控制,来认识”冯诺依曼”. 存储程序控制 ...

  5. Ubuntu更换国内源

    打开终端,输入:sudo gedit /etc/apt/sources.list 在文件最底部输入以下内容: deb http://mirrors.ustc.edu.cn/ubuntu/ xenial ...

  6. 500. Keyboard Row （5月26日）

    解答 class Solution { public: vector<string> findWords(vector<string>& words) { vector ...

  7. 史上更全的 MySQL 高性能优化实战总结！

    1 前言 2 优化的哲学 3 优化思路 3.1 优化什么 3.2 优化的范围有哪些 3.3 优化维度 4 优化工具有啥? 4.1 数据库层面 4.2 数据库层面问题解决思路 4.3 系统层面 4.4 ...

  8. yii学习笔记（6），数据库操作（增删改）

    数据库增删改操作通过活动记录实例来完成 插入记录 /* ----------添加记录---------- */ // 创建活动记录对象 $article = new Article(); $artic ...

  9. Vue.js的小例子--随便写的

    1.领导安排明天给同事们科普下vue 2.简单写了两个小例子 3.话不多说直接上代码 <!DOCTYPE html> <html> <head> <meta ...

  10. HTTP学习之URL与资源

    URL是因特网资源的标准化名称,该字符串指向一条电子信息片段,定义服务端应用程序在什么位置以及客户端要如何与其交互 一条完整的URL由多个片段组成. 通用URL组件 方案 以哪种协议访问服务器 用户 ...