文档章节

IOS之禁用UIWebView的默认交互行为

big军
 big军
发布于 2013/03/02 21:06
字数 1329
阅读 27041
收藏 20
      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.禁用整个页面的用户选择和链接弹出框,可页面样式表中添加如下样式规则
body.disable-default-action
{
    -webkit-touch-callout:none ;
    -webkit-user-select:none ;
}
        同时在body标签中加入该类型,如
<body class = "disable-default-action">
    page content….
</body>
        2.只允许Form表单域执行文本的剪切板操作,添加如下规则
*:not(input,textarea) {
    -webkit-touch-callout: none;
    -webkit-user-select: none; 
}
       3.禁用某个链接的长按弹出框,可在链接添加内联样式规则如下
<a href="http://www.baidu.com" style = "-webkit-touch-callout:none">
       4.以编程方式动态的向加载页面添加样式来达到同样的效果

        实现UIWebviewDelegate协议,在webViewDidFinishLoad:方法中添加以下代码
- (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

© 著作权归作者所有

共有 人打赏支持
big军
粉丝 35
博文 54
码字总数 90542
作品 0
浦东
程序员
私信 提问
加载中

评论(13)

断水殇
断水殇
如何单独去掉放大镜功能呢?我现在做到的是webview里长按有内容的地方是禁掉了,但我的页面中还有一些空白的地方,长按空白处就会出现放大镜,请问一下这个怎么解决?
big军
big军

引用来自“微笑の辛翼”的评论

引用来自“big军”的评论

引用来自“微笑の辛翼”的评论

在uiwebview 上面,长时间触摸,会产生选取框对吧,通常是两个蓝色的边,中间是被淡蓝色选中,这个时候再能选中标签中的内容。如果把边框拖出范围,就会变成一个方框,有4个蓝色按钮去改变形状。就是有没有办法不要种4个蓝色按钮这样的选取框。就是累死你第一张的截图哪样的选取框。

你的这种要求,我没仔细试过,不过我我觉得“选择行为”是个整体的交互过程,应该没有细分到你想要的那个阶段。当然这是我个人的猜测,有待验证!

╮(╯▽╰)╭ 我感觉就不是UIwebview实现的。经理楞是要弄,我是该自杀呢还是自杀呢 %>_<%

介个。。。。。。生命诚可贵!
微笑de辛翼
微笑de辛翼

引用来自“big军”的评论

引用来自“微笑の辛翼”的评论

在uiwebview 上面,长时间触摸,会产生选取框对吧,通常是两个蓝色的边,中间是被淡蓝色选中,这个时候再能选中标签中的内容。如果把边框拖出范围,就会变成一个方框,有4个蓝色按钮去改变形状。就是有没有办法不要种4个蓝色按钮这样的选取框。就是累死你第一张的截图哪样的选取框。

你的这种要求,我没仔细试过,不过我我觉得“选择行为”是个整体的交互过程,应该没有细分到你想要的那个阶段。当然这是我个人的猜测,有待验证!

╮(╯▽╰)╭ 我感觉就不是UIwebview实现的。经理楞是要弄,我是该自杀呢还是自杀呢 %>_<%
big军
big军

引用来自“微笑の辛翼”的评论

在uiwebview 上面,长时间触摸,会产生选取框对吧,通常是两个蓝色的边,中间是被淡蓝色选中,这个时候再能选中标签中的内容。如果把边框拖出范围,就会变成一个方框,有4个蓝色按钮去改变形状。就是有没有办法不要种4个蓝色按钮这样的选取框。就是累死你第一张的截图哪样的选取框。

你的这种要求,我没仔细试过,不过我我觉得“选择行为”是个整体的交互过程,应该没有细分到你想要的那个阶段。当然这是我个人的猜测,有待验证!
微笑de辛翼
微笑de辛翼
在uiwebview 上面,长时间触摸,会产生选取框对吧,通常是两个蓝色的边,中间是被淡蓝色选中,这个时候再能选中标签中的内容。如果把边框拖出范围,就会变成一个方框,有4个蓝色按钮去改变形状。就是有没有办法不要种4个蓝色按钮这样的选取框。就是累死你第一张的截图哪样的选取框。
big军
big军

引用来自“微笑の辛翼”的评论

引用来自“big军”的评论

引用来自“微笑の辛翼”的评论

引用来自“big军”的评论

引用来自“微笑の辛翼”的评论

很多浏览器都支持这个吧,阻止用户选择的。但是text这个感觉不行,最苦恼的就是那个方框的大块选择框。怎么解决,能禁用吗

"方框的大块选择框"你指的什么?

第一张图片那样

在HTML页面中的body元素使用-webkit-user-select:none;就可以了。在我这里可以!

额。。我想说的是,单独去掉这个方形的选取框,他会选取一个块,不像在段落内,从第几个字到第几个字那种。而不是全选。。这个选中后,感觉不是很好看而且父标签是未定义。

我还是没太明白,不过-webkit-user-select:none;貌似会把选择彻底禁掉,而不是只屏蔽选择的某一个阶段!
微笑de辛翼
微笑de辛翼

引用来自“big军”的评论

引用来自“微笑の辛翼”的评论

引用来自“big军”的评论

引用来自“微笑の辛翼”的评论

很多浏览器都支持这个吧,阻止用户选择的。但是text这个感觉不行,最苦恼的就是那个方框的大块选择框。怎么解决,能禁用吗

"方框的大块选择框"你指的什么?

第一张图片那样

在HTML页面中的body元素使用-webkit-user-select:none;就可以了。在我这里可以!

额。。我想说的是,单独去掉这个方形的选取框,他会选取一个块,不像在段落内,从第几个字到第几个字那种。而不是全选。。这个选中后,感觉不是很好看而且父标签是未定义。
big军
big军

引用来自“微笑の辛翼”的评论

引用来自“big军”的评论

引用来自“微笑の辛翼”的评论

很多浏览器都支持这个吧,阻止用户选择的。但是text这个感觉不行,最苦恼的就是那个方框的大块选择框。怎么解决,能禁用吗

"方框的大块选择框"你指的什么?

第一张图片那样

在HTML页面中的body元素使用-webkit-user-select:none;就可以了。在我这里可以!
微笑de辛翼
微笑de辛翼

引用来自“big军”的评论

引用来自“微笑の辛翼”的评论

很多浏览器都支持这个吧,阻止用户选择的。但是text这个感觉不行,最苦恼的就是那个方框的大块选择框。怎么解决,能禁用吗

"方框的大块选择框"你指的什么?

第一张图片那样
big军
big军

引用来自“微笑の辛翼”的评论

很多浏览器都支持这个吧,阻止用户选择的。但是text这个感觉不行,最苦恼的就是那个方框的大块选择框。怎么解决,能禁用吗

"方框的大块选择框"你指的什么?
iOS与JS交互之UIWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「UIWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
08/28
0
0
iOS与JS交互之UIWebView-JSExport协议

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「JSExport」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前端(不...

QiShare
08/31
0
0
iOS与JS交互之UIWebView-JavaScriptCore框架

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「JavaScriptCore」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前...

QiShare
08/30
0
0
iOS与JS交互之WKWebView-WKScriptMessageHandler协议

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKJSMessageHandler」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
09/02
0
0
iOS与JS交互之WKWebView-WKUIDelegate协议

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKUIDelegate」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),JS指前端...

QiShare
09/03
0
0

没有更多内容

加载失败,请刷新页面

加载更多

使用正则表达式实现网页爬虫的思路详解

网页爬虫:就是一个程序用于在互联网中获取指定规则的数据。这篇文章主要介绍了使用正则表达式实现网页爬虫的思路详解,需要的朋友可以参考下 网页爬虫:就是一个程序用于在互联网中获取指定规...

前端小攻略
23分钟前
0
0
vue中锚点的三种方法

第一种: router.js中添加 mode: 'history', srcollBehavior(to,from,savedPosition){ if(to.hash){ return {selector:to.hash } } } 组件: <template><div><ul class="li......

peakedness丶
24分钟前
0
0
记一次面试最常见的10个Redis"刁难"问题

导读:在程序员面试过程中Redis相关的知识是常被问到的话题。作为一名在互联网技术行业打击过成百上千名的资深技术面试官,本文作者总结了面试过程中经常问到的问题。十分值得一读。 Redis在...

小刀爱编程
今天
20
0
TiDB Lab 诞生记 | TiDB Hackathon 优秀项目分享

本文由红凤凰粉凤凰粉红凤凰队的成员主笔,他们的项目 TiDB Lab 在本届 TiDB Hackathon 2018 中获得了二等奖。TiDB Lab 为 TiDB 培训体系增加了一个可以动态观测 TiDB / TiKV / PD 细节的动画...

TiDB
今天
5
0
当区块链遇到零知识证明

本文由云+社区发表 当区块链遇到零知识证明 什么是零知识证明 零知识证明的官方定义是能够在不向验证者任何有用的信息的情况下,使验证者相信某个论断是正确的。这个定义有点抽象,下面笔者举...

腾讯云加社区
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部