UIWebView的一些用法总结

最新推荐文章于 2022-08-21 14:02:22 发布
最新推荐文章于 2022-08-21 14:02:22 发布
阅读量662 收藏
点赞数 1
分类专栏： IOS开发笔记整理 文章标签： UIWebView ios开发
设置背景透明

  • 设置webview的backgroundColor属性为[UIColor clearColor];

    ?
    1
    webView.backgroundColor = [UIColor clearColor];

  • 为webview中的HTML页面的body标签添加CSS背景样式设置

    ?
    1
    2
    3
    <body style= "background-color: transparent" >
         ...
    </body>

  • 设置webview的opaque属性值为NO

    ?
    1
    webView.opaque = NO;
加载本地HTML页面

  1. 方式一

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    NSString *localHTMLPageName = @ "myPage" ;
     
    NSString *path = [[NSBundle mainBundle] pathForResource:localHTMLPageName ofType:@ "html" ];
     
    // 从html文件中读取html字符串
    NSFileHandle *readHandle = [NSFileHandle fileHandleForReadingAtPath:path];
     
    NSString *htmlString = [[NSString alloc] initWithData:
                         [readHandle readDataToEndOfFile] encoding:NSUTF8StringEncoding];
    // 或使用                
    // NSString *htmlString = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:NULL];
     
    // baseURL用来确定htmlString的基准地址，
    // 相当于HTML的<base>标签的作用，定义页面中所有链接的默认地址。
    [webView loadHTMLString:htmlString baseURL:[[NSBundle mainBundle] bundleURL]];

  2. 方式二

    ?
    1
    2
    3
    4
    5
    6
    7
    NSString *localHTMLPageName = @ "myPage" ;
     
    NSString *localHTMLPageFilePath = [[NSBundle mainBundle] pathForResource:localHTMLPageName ofType:@ "html" ];
     
    NSURL *localHTMLPageFileURL = [NSURL fileURLWithPath:localHTMLPageFilePath];
     
    [webView loadRequest:[NSURLRequest requestWithURL:localHTMLPageFileURL]];
移除滚动后的外边阴影

UIWebView包含一个scrollView组件，用来将关联web内容实现滚动效果，页面滚动后的UIWebView的面板周围会出现阴影效果，该效果是在四周添加UIImageView实现的，因此移除这种阴影效果的代码如下：

?
1
2
3
4
5
6
7
8
UIScrollView *scrollView = webView.scrollView;
 
     for ( int i = 0 ; i < scrollView.subviews.count ; i++) {
         UIView *view = [scrollView.subviews objectAtIndex:i];
         if ([view isKindOfClass:[UIImageView class ]]) {
             view.hidden = YES ;
         }
     }

参见Remove UIWebView Shadow?

在Safari中打开链接地址

默认情况下，长按web页面中的链接,系统会自动呼出菜单提供open，copy和cancel选项，但如果要实现触击链接跳转至safari中打开页面该怎么做呢？UIWebViewDelegate协议中，包含

?
1
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

接口，如果为webView添加了delegate对象并实现该接口，那么在webView加载任何一个frame之前都会delegate对象的该方法，该方法的返回值用以控制是否允许加载目标链接页面的内容，返回YES将直接加载内容，NO则反之。并且UIWebViewNavigationType枚举，定义了页面中用户行为的分类，包括

  • UIWebViewNavigationTypeLinkClicked，用户触击了一个链接。
  • UIWebViewNavigationTypeFormSubmitted，用户提交了一个表单。
  • UIWebViewNavigationTypeBackForward，用户触击前进或返回按钮。
  • UIWebViewNavigationTypeReload，用户触击重新加载的按钮。
  • UIWebViewNavigationTypeFormResubmitted，用户重复提交表单
  • UIWebViewNavigationTypeOther，发生其它行为。

因此，实现用户触击UIWebView页面中的链接，并跳至Safari中打开链接页面的步骤如下：

  1. 定义实现UIWebViewDelegate协议的类MyWebViewDelegate（通常是由包含UIWebView的controller中实现UIWebViewDelegate协议）。

  2. 按如下方式实现webView:shouldStartLoadWithRequest:navigationType:接口

    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
      navigationType:(UIWebViewNavigationType)navigationType
    {
         if ( navigationType == UIWebViewNavigationTypeLinkClicked ) {
             [[UIApplication sharedApplication] openURL:[request URL]];
             return NO;
         }
         return YES;
    }

  3. 新建MyWebViewDelegate对象，并赋值给webView的delegate属性

参见：UIWebView open links in Safari

禁用页面滚动弹跳

之前提到UIWebView使用一个UIScrollView对象来关联web页面的内容，通过UIWebView的scrollView属性即可获得该对象，默认情况下网页长度超出设备视口长度后页面会滚动，用户使用手指滚动页面到页面边距并放开手指后页面会产生一个弹跳效果，去除这个效果的方法如下

?
1
webView.scrollView.bounces = NO ;

参见：Stop UIWebView from “bouncing” vertically?

scalesPageToFit属性

默认情况下UIWebView加载HTML页面后，会以页面的原始大小进行显示，亦即如果页面的大小超出UIWebView视口大小，UIWebView会出现滚动效果，而且用户只能通过滚动页面来查看不同区域的内容，不能使用手指的捏合手势来放大或缩小页面。通过设置

?
1
webView.scalesPageToFit = YES ;

UIWebView可以缩放HTML页面来适配其视口大小，从而达到整屏显示内容的效果，并且用户可以用捏合动作来放大或缩小页面来查看内容。

调用javascript代码

UIWebView提供

?
1
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script

方法，可以在objective-c代码中调用javascript代码，参数script字符串保存了所要执行的js代码字符串，执行结果以字符串形式返回。以获取web页面标题为例，代码如下：

?
1
NSString *pageTitle = [webView stringByEvaluatingJavaScriptFromString:@ "document.title" ];

脚本的代码内容还要依据具体的应用场景。此外，该方法规定执行的脚本时长限定在10s内，为的是防止过长时间的阻塞页面主线程，超过执行时间上线会自动停止脚本运行，并且脚本可分配内存限定在10MB内，超过分配上线将会引发异常。

javascript调用native代码

以上提到，UIWebView加载任何一个页面之前都会调用其代理的

?
1
2
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
          navigationType:(UIWebViewNavigationType)navigationType

方法，通过调用参数request对象的URL属性来获取关于本次请求的地址以及参数信息，因此可以通过js代码模拟一次特殊的网络请求来达到调用该代理方法的作用，并通过过滤“特殊的url”来达到有目的性的js代码调用native代码的效果。所谓的“特殊的url”主要的目的是达到一种标识的效果，我们可以规定url的scheme部分，如appscheme://appName?invokeMethodName=objcMethod&paramA=xxx;也可以在常规的url后面附加特殊的参数标识，如http://www.yoursite.com?objecMethodCallFlag=1&methodName=methodA&paramA=xxx。之后根据规定在代理方法中去相应的解析url并做出if else判断即可。常见的调用方式是动态添加一个隐藏的iframe标签到HTML页面，如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// js
function invokeObjc(url) {
     var iframe;
     iframe = document.createElement( "iframe" );
     iframe.setAttribute( "src" , url);
     iframe.setAttribute( "style" , "display:none;" );
     document.body.appendChild(iframe);
     iframe.parentNode.removeChild(iframe);
}
 
var url = "appscheme://appName?invokeMethodName=objcMethod&paramA=xxx" ;
 
invokeObjc(url);
 
// objc
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request
          navigationType:(UIWebViewNavigationType)navigationType
｛
     static NSString *callScheme = @ "appscheme" ;
 
     static NSString *invokeMethodName = @ "invokeMethodName" ;
 
     NSString *scheme = request.URL.scheme ;
 
     if ([callScheme isEqualToString:scheme]) {
 
         NSString *query = request.URL.query ;
 
         NSArray *arr = [query componentsSeparatedByString:@ "&" ];
 
         __block NSString *methodName = @ "" ;
 
         NSMutableDictionary *params = [NSMutableDictionary new ];
 
         // 未考虑参数的解码操作
         [arr enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
             NSArray *kv =[obj componentsSeparatedByString:@ "=" ];
             if (kv) {
                 if ([invokeMethodName isEqualToString: kv[ 0 ]]) {
                     methodName = kv[ 1 ];
                 } else {
                     [params setObject:kv[ 1 ] forKey:kv[ 0 ]];
                 }
             }
         }];
         // 获得方法名和参数之后，可以添加逻辑判断
         NSLog(@ "%@" ,methodName);
         NSLog(@ "%@" ,params);
 
         return NO ;
     }
     return YES ;
 
  ｝

前面提到的native代码调用js代码的实现方式，结合两种实现方式即完成了js与native代码间的简单的通信操作。

让UIWebView更加接近native

某些情况下，我们既想要UIWebView加载web页面，又想使得所加载的页面的外观和操作行为更加接近native感觉。这时需要使用一些CSS样式来达到这些效果，这些CSS只适用于IOS中的Safari。

  • -webkit-touch-callout

    禁用长按触控对象弹出的菜单。IOS中，当你长按一个触控对象时，如链接，safari会弹出包含链接信息的菜单。禁用此行为CSS代码

    ?
    1
    2
    3
    .disable-callout{
         -webkit-touch-callout:none ;
    }

    或在webViewDidFinisheLoad中使用

    ?
    1
    [webView stringByEvaluatingJavaScriptFromString:@ "document.documentElement.style.webkitTouchCallout='none';" ];

  • -webkit-user-select

    控制用户是否可以选择页面元素内容。IOS中，在页面元素中进行长按操作，safari会弹出菜单，来允许进行选择行为。禁用此行为代码

    ?
    1
    2
    3
    .disable-select{
         -webkit-user-select:none;
    }

    或在webViewDidFinisheLoad中使用

    ?
    1
    [webView stringByEvaluatingJavaScriptFromString:@ "document.documentElement.style.webkitUserSelect='none';" ];

  • -webkit-tap-highlight-color

    覆盖当用户tap链接或clickable元素时默认产生的高亮颜色（灰色）。如

    ?
    1
    2
    3
    .no-highlight{
         -webkit-tap-highlight-color:rgba( 0 , 0 , 0 , 0 );
    }
卑微的戏子
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS UIWebView 全属性详解（苹果官方文档翻译整理）
海渊_haiyuan的博客
07-11 9580
iOS UIWebView 全属性详解（苹果官方文档翻译整理）前言我这次之所以特意对这个看起来比较稀松平常的控件进行详细说明呢，是基于这么几点考虑的：首先，我们都知道这段时间HTML5是特别的火，对于移动端开发的冲击还是蛮大的，（各位要是对HTML5不是很了解的话，请点击HTML5 百度百科进行查看。）那么对于移动端来说，HTML5要想在移动端进行使用，那么必然需要一个载体，这个载体毋庸置疑的就是U
UIWebView问题
零度的浪漫
07-28 141
1.UIWebView内嵌在UITableView里，webview内容较少情况，在滚动到web view时，停顿一会滚动条消失，整个tableview就不能滚动问题。 解决办法：             for (id subView in webView.subviews) {                 if ([subView isKindOfClass:[UIScrollVi...
iOS 获取UIWebView上面的按钮点击事件
热门推荐
zhangkongzhongyun的专栏
04-22 7万+
在网上看到很多文章都说iOS的UIWebView比较耗内存，在我的项目中，最开始我也是用UIWebView来加载网页的。刚开始加载的是自己拼接成的Html，后来在Html中加入一个按钮，点击之后用当前的UIWebView去加载网络上的网页。程序跑起来发现非常耗内存，加载几个网上的网页之后就爆内存警告了，不处理的话很容易被评估拒掉app。后来就改成用系统的safari浏览器来打开网络上的网页，把着耗
iOS 关于UIWebView常见使用方法
qq_34491373的博客
08-21 1345
iOS 随笔
ios UIWebView 区分加载和点击连接
Shin Suo (PunchBox)
08-08 7409
UIWebView的Delegate方法中有 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; 其中navigationType可以判断出来该事件是U
uiwebview的使用方法总结
01-05
uiwebview的使用方法。从怎么建立uiwebview讲起，详细讲述了此控件的使用方法
IOS中使用UIWebView 加载网页、文件、 html的方法
01-04
生成webview 有两种方法： 1、通过storyboard 拖拽 2、通过alloc init 来初始化 创建webview，下列文本中 _webView.dataDetectorTypes = UIDataDetectorTypeAll; 是识别webview中的类型，例如 当webview中有电话号码...
Cocos2dx中UIWebView替换为WKWebView
08-09
IOS开发中因为引入cocos2dx，导致代码审核不通过无法提交( Apple will stop accepting submissions of apps that use UIWebView APIs )。该问题的解决方案有两种：1）升级Cocos2dx的版本，在查看Cocoas官网及Cocoas...
UIWebView的使用代码
12-15
通过UIWebView的scrollView属性即可获得该对象，默认情况下网页长度超出设备视口长度后页面会滚动，用户使用手指滚动页面到页面边距并放开手指后页面会产生一个弹跳效果，去除这个效果的方法如下 ? 1 webView....
UIWebView在Safari中打开链接
xfxf996的博客
07-07 233
I have a very simple UIWebView with content from my application bundle. 我有一个非常简单的UIWebView，其中包含我的应用
ios-UIWebViewJSDemo.zip
07-11
objective-C 于 javascript 的交互, 点击网页中标签包裹的的图片, 展示大图, 并浏览所有的图片
ios开发之View属性hidden, opaque, alpha, opacity的区别
qq_21649645的专栏
05-06 9291
一、alpha 液晶显示器是由一个个的像素点组成的，每个像素点都可以显示一个由RGBA颜色空间组成的一种色值。其中的A就表示透明度alpha，UIView中alpha是一个浮点值，取值范围0~1.0,表示从完全透明到完全不透明。 1、alpha值只会影响自己，不会影响subView的背景颜色。 2、alpha设为空之后，UIView不会从响应者链中移除，仍然可以收到event。
UIWebView UIWKWebView的使用心得
onlychengzhi的博客
04-21 1654
UIWebView IOS7  使用的是UIWebView 在代理方法中 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType； 作用就是准备加载
将View设置为Opaque
wy10207010219的专栏
07-01 2822
转自：http://www.tiboo.cn/dianzijie/b1837169/ This property provides a hint to the drawing system as to how it should treat the view. If set to YES, the drawing system treats the view as fully opaqu
IOS混合编程 - UIWebView 与 WKWebView . 基本使用 (一)
wolaikanyanhau的博客
04-07 1991
UIWebView UIWebView的基本使用方法 : 就这样就已经整整个baidu的页面展示到app上 下面我们看一下webView的属性与方法 UIWebView *webView = [[UIWebView alloc] initWithFrame:[UIScreen mainScreen].bounds]; self.view = webView; NSU
unity3d for android WebView和JavaScript进行简单通信
飞跃 Ni Wo Ta
07-31 4132
Android中WebView可以和JavaScript之间进行通信，这样Native代码就能很好的和本地或者远程服务器上的Html进行交互。写了一个最简单的例子，WebView和本地的Html代码进行交互。 webview.xml 先加入一个全频的webview控件 <LinearLayout xmlns:android="http://schemas.android.com/apk/re
uiwebview 实现惯性滚动
最新发布
05-26
在 iOS 中，UIWebView 继承自 UIScrollView，因此可以使用 UIScrollView 的属性和方法来实现惯性滚动。以下是实现惯性滚动的步骤： 1. 获取 UIWebView 的 scrollView 对象： ```objc UIScrollView *scrollView = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值