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

时间: 2024-07-29 15:36:24

iOS ---UIWebView 默认交互行为---【转载】-------未完待续的相关文章

iOS开发系统版本适配(未完待续。。。)

1.iOS9引入了新特性App Transport Security (ATS).新特性要求App内访问的网络必须使用HTTPS协议:iOS9系统发送的网络请求将统一使用TLS 1.2 SSL.采用TLS 1.2 协议,目的是强制增强数据访问安全,而且 系统 Foundation 框架下的相关网络请求,将不再默认使用 Http 等不安全的网络协议,而默认采用 TLS 1.2.简单的说,就是苹果限制了HTTP协议,如果你用的是http协议的,要处理请参考我的另一文章,iOS9网络适配 2.iOS9

iOS开发——设备信息小结(未完待续...)

1.获取设备的信息  UIDevice *device = [[UIDevice alloc] init]; NSString *name = device.name;       //获取设备所有者的名称 NSString *model = device.name;      //获取设备的类别 NSString *type = device.localizedModel; //获取本地化版本 NSString *systemName = device.systemName;   //获取当前

听风讲MVC丶 —— 一言不合就撸码 (未完待续&#183;&#183;&#183;&#183;&#183;&#183;)

     希望你看了此小随 可以实现自己的MVC框架     也祝所有的程序员身体健康一切安好                                                                                                                                                ——久伴深海丶默 1.什么是前端控制器(font controller).Java Web中的前端控制器是应用的门面,

Linux 命令个人总结====== 未完待续 个人认为比较重要

Linux 命令个人总结====== 未完待续 man [功能说明]: 查看帮助 [语法格式]: man [123456789] 命令.文件. [选项参数]: 数字"1"表示用户命令,比如"ls" 数字"2"表示系统调用 数字"3"表示C语言库函数 数字"4"表示设备或特殊文件 数字"5"表示文件格式和规则 数字"6"表示游戏及其他 数字"7"表示

把握linux内核设计思想系列(未完待续......)

[版权声明:尊重原创,转载请保留出处:blog.csdn.net/shallnet,文章仅供学习交流,请勿用于商业用途] 把握linux内核设计思想(一):系统调用 把握linux内核设计思想(二):硬中断及中断处理 把握linux内核设计思想(三):下半部机制之软中断 把握linux内核设计思想(四):下半部机制之tasklet 把握linux内核设计思想(五):下半部机制之工作队列及几种机制的选择 把握linux内核设计思想(六):内核时钟中断 把握linux内核设计思想(七):内核定时器和

git个人使用总结 —— idea命令行、撤销commit (未完待续)

近期在使用git,最开始在idea界面操作,后来要求用命令行.刚开始还不是很习惯,感觉很麻烦,用了几天后感觉爽极了! 其实git的命令也不是很多,熟悉一段时间就差不多能顺利使用了.使用过程中遇到了各种各样的问题,有些小问题就在这里集中总结一下. 1.idea命令行.git安装后就自带终端git bash,使用起来很方便.但是用idea开发,开发后还要在相应文件夹下打开git bash很麻烦.其实idea也带有终端terminal,在最下方可以找到,在这里就可以执行命令.但是如果是默认方式安装的g

NOIP2016 那些我所追求的 [未完待续]

人生第一场正式OI [Day -1] 2016-11-17 期中考试无心插柳柳成荫,考了全市第2班里第1(还不是因为只复习了不到两天考试),马上请了一个周的假准备NOIP(数学生物还是回去上课的) 灰哥跟我一块,tlq考吃了没请假 正好下个周老班出去学习了不害怕 星期4所有人都请假了,漫无目的地复习了一天题,参考题解补了一场模拟赛 晚上灰哥因为住宿直接回家了,还让我给XXX送纸条 SD NOIP的群好多人直播,我们就直播了个国际象棋(竟然有人说八皇后,我只升变了两个兵称为皇后),然而竟然默认开启

关于DOM的一些总结(未完待续......)

DOM 实例1:购物车实例(数量,小计和总计的变化) 这里主要是如何获取页面元素的节点: document.getElementById("...") cocument.querySelector("选择器"); 通过所需的元素节点,得到我们想要的数据做运算. 实例2:伸缩二级菜单 这里主要是逻辑判断,不同的逻辑给不同的className来控制样式. 需求是:一级菜单可以都关闭,但最多只有一个能打开.(思路是,每次都将所有的一级菜单关闭,然后仅打开当前点击的元素,并

一篇文章让Oracle程序猿学会MySql【未完待续】

一篇文章让Oracle DB学会MySql[未完待续] 随笔前言: 本篇文章是针对已经能够熟练使用Oracle数据库的DB所写的快速学会MySql,为什么敢这么说,是因为本人认为Oracle在功能性方面和难度方面都比MySql要高一些,所以精通Oracle的DB在学习MySql的时候,没有必要从头到尾再去搞一遍,只需要掌握两者的用法区别即可.故本篇文章就针对Oracle和MySql的区别来把MySql的知识掌握住,在文章中,实例都是MySql环境下的实例,而Oracle可能知识一句话来概括,所以