文档章节

UIWebView的一些用法总结

big军
 big军
发布于 2013/07/27 16:29
字数 1767
阅读 12487
收藏 11

####设置背景透明

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

      webView.backgroundColor = [UIColor clearColor];
    
  • 为webview中的HTML页面的body标签添加CSS背景样式设置

      <body style="background-color: transparent">
      	...
      </body>
    
  • 设置webview的opaque属性值为NO

      webView.opaque = NO;
    

####加载本地HTML页面

  1. 方式一

     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. 方式二

     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实现的,因此移除这种阴影效果的代码如下:

	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协议中,包含

- (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:接口

     - (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属性即可获得该对象,默认情况下网页长度超出设备视口长度后页面会滚动,用户使用手指滚动页面到页面边距并放开手指后页面会产生一个弹跳效果,去除这个效果的方法如下

webView.scrollView.bounces = NO ;

参见:Stop UIWebView from “bouncing” vertically?

####scalesPageToFit属性

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

webView.scalesPageToFit = YES ;

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

####调用javascript代码

UIWebView提供

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

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

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

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

####javascript调用native代码

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

	- (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页面,如下:

// 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代码

      .disable-callout{
      	-webkit-touch-callout:none ;
      }
    

    或在webViewDidFinisheLoad中使用

       [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitTouchCallout='none';"];
    
  • -webkit-user-select

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

      .disable-select{
      	-webkit-user-select:none;
      }
    

    或在webViewDidFinisheLoad中使用

       [webView stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"];
    
  • -webkit-tap-highlight-color

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

      .no-highlight{
      	-webkit-tap-highlight-color:rgba(0,0,0,0);
      }
    

参见Apple CSS Reference

© 著作权归作者所有

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

评论(1)

amonxu
amonxu
好文章,学习了。
iOS开发之Objective-C与JavaScript的交互

UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将javascript嵌入页面中,通过这个方法我们可以在iOS中与UIWebView中的网页元素交互。 stringByEv...

鉴客
2011/12/06
1K
0
Objective-C与JavaScript的交互

UIWebView是iOS最常用的SDK之一,它有一个stringByEvaluatingJavaScriptFromString方法可以将 javascript嵌入页面中,通过这个方法我们可以在iOS中与UIWebView中的网页元素交互。 UIWebView是...

长平狐
2013/03/19
114
0
stringByEvaluatingJavaScriptFromString 交互

stringByEvaluatingJavaScriptFromString 使用stringByEvaluatingJavaScriptFromString方法,需要等UIWebView中的页面加载完成之后去调用。我们在界面上拖放一个UIWebView控件。在Load中将g...

风了个1
2016/03/16
36
0
iOS-WKWebView的使用

参考文章:http://www.cocoachina.com/ios/20180831/24753.html WK时苹果在iOS8.0之后推出的控件,相比于UIWebView: 内存消耗少; 解决了网页加载时的内存泄漏问题; 与HTML页面的交互更方便...

昔年随心
2018/10/17
0
0
收集一些讲的比较好的有用的文章

使用WKWebView替换UIWebView 地址: http://www.jianshu.com/p/6ba2507445e4 简介: 介绍 的基本用法, UIWebView的缺点. 结论, 以后加载网页就用WHWebView吧. 2. 更改NavigationBar的透明度 地...

hell03W
2016/07/01
32
0

没有更多内容

加载失败,请刷新页面

加载更多

SSH安全加强两步走

从 OpenSSH 6.2 开始已经支持 SSH 多因素认证,本文就来讲讲如何在 OpenSSH 下启用该特性。 OpenSSH 6.2 以后的版本多了一个配置项 AuthenticationMethods。该配置项可以让 OpenSSH 同时指定...

xiangyunyan
32分钟前
4
0
C或C++不是C/C++

http://www.voidcn.com/article/p-mucdruqa-ws.html

shzwork
今天
6
0
OSChina 周六乱弹 —— 如何将梳子卖给和尚

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @for_ :划水五分钟,专注两小时。分享Various Artists的单曲《贝多芬第8号钢琴奏鸣曲悲伤的第三乐章》: 《贝多芬第8号钢琴奏鸣曲悲伤的第三乐...

小小编辑
今天
198
8
ES5

什么是ES5:比普通js运行要求更加严格的模式 为什么:js语言本身有很多广受诟病的缺陷 如何:在当前作用域的顶部添加:"use strict" 要求: 1、禁止给未声明的变量赋值 2、静默失败升级为错误...

wytao1995
今天
7
0
c++ 内联函数调用快的原因

见图片分析

天王盖地虎626
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部