http://blog.csdn.net/y550918116j/article/details/49619847

UIWebView(基础)

当你在项目中想嵌入网页时，可以使用UIWebView类嵌入Web内容。你只需要创建一个UIWebView对象，并将它附加到一个view窗口。你还可以使用这个类来执行页面历史的前进或后退。

本文主要介绍关于UIWebView的基础，包括：加载网页、实现代理以及JS和OC的互相调用。

1 准备工作

1.1 Html页面

我已经为大家创建了html页面的源代码，只需要复制到记事本，并将文件名改为index.html。

这个页面有输入框、按钮和做显示用的，其简单功能是在输入框输入数据，点击按钮后显示到显示区域。

在浏览器运行可以看到如下效果。

1.2 搭建项目

这个地方就不详细描述了，创建一个简单项目->拉一个UIWebView到界面->UIWebView指向UIViewController的属性名。

搭建后的核心部分如下，这里我使用的VC名为BaseVC。

#import"BaseVC.h"@interfaceBaseVC() @property(weak,nonatomic)IBOutletUIWebView*webView;///< UIWebView

@end@implementationBaseVC

- (void)viewDidLoad {

[superviewDidLoad];

}@end

2 显示Web页面

将我们创建好的index.html拉到项目中，至于位置就随你高兴了。

然后我们改造BaseVC的viewDidLoad方法。

- (void)viewDidLoad {

[superviewDidLoad];

// 找到index.html的路径

NSURL*url = [[NSBundlemainBundle] URLForResource:@"index"withExtension:@"html"];

NSURLRequest*urlRequest = [NSURLRequestrequestWithURL:url];// url的位置[self.webViewloadRequest:urlRequest];// 加载页面

}

由于我们的html页面在项目里面，我们可以直接使用[NSBundle mainBundle]去寻找。如果你使用的是网咯连接“www.baidu.com”,你可以这样获得NSURL。

url =[NSURL URLWithString:@"www.baidu.com"];

然后运行项目，就可以看到和浏览器一样的效果。

3 代理UIWebViewDelegate

UIWebView也有代理，如果你不懂什么是代理模式，查阅我的博文《23设计模式之代理模式(Proxy)》。我们在UIWebViewDelegate发现了四个方法。

__TVOS_PROHIBITED@protocolUIWebViewDelegate

@optional

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

- (void)webViewDidStartLoad:(UIWebView*)webView;

- (void)webViewDidFinishLoad:(UIWebView*)webView;

- (void)webView:(UIWebView*)webView didFailLoadWithError:(nullableNSError*)error;

@end

这四个代理的作用分别是：

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

将要加载一个web页面，返回yes代表继续加载，no代表不加载。

- (void)webViewDidStartLoad:(UIWebView *)webView;:

开始加载web页面；

- (void)webViewDidFinishLoad:(UIWebView *)webView;:

加载web页面结束;

- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;:

加载web页面出错，你可以在error看到错误信息。

现在我们改造BaseVC。下面都只显示核心代码，不重要的代码不显示。

@interfaceBaseVC()<UIWebViewDelegate>

@property(weak,nonatomic)IBOutletUIWebView*webView;///< UIWebView

@end

@implementationBaseVC

- (void)viewDidLoad {

         [superviewDidLoad];

        // 找到index.html的路径

     NSURL*url = [[NSBundlemainBundle] URLForResource:@"index"withExtension:@"html"];

NSURLRequest*urlRequest = [NSURLRequestrequestWithURL:url];// url的位置self.webView.delegate=self;// 代理UIWebViewDelegate

[self.webViewloadRequest:urlRequest];// 加载页面

}

#pragma mark - UIWebViewDelegate#pragma mark 开始加载网页

- (void)webViewDidStartLoad:(UIWebView*)webView {

       NSLog(@"%@", NSStringFromSelector(_cmd));

}

#pragma mark 网页加载完成

- (void)webViewDidFinishLoad:(UIWebView*)webView {

      NSLog(@"%@", NSStringFromSelector(_cmd));

}

#pragma mark 网页加载出错

- (void)webView:(UIWebView*)webView didFailLoadWithError:(nullableNSError*)error {

        NSLog(@"%@:%@", NSStringFromSelector(_cmd), error.localizedDescription);

}

#pragma mark 网页监听

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

        NSLog(@"%@", NSStringFromSelector(_cmd));returnYES;

}

@end

运行后你会看到如下的输出,也体现了三种回调的顺序。如果你看到了其他输出信息，我想你可能出错了，请查阅前面的介绍，修改后再运行。

webView:shouldStartLoadWithRequest:navigationType:

webViewDidStartLoad:

webViewDidFinishLoad:

4 JS和OC互动

js和oc互动是一件很麻烦的事，毕竟是两种不同的开发语言。oc调js很简单，js回调oc就比较麻烦了。

oc调js:uiwebview就自带这样的方法

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

js掉oc：我们都知道js可以控制页面的跳转，我们还可以在链接中携带参数。而UIWebView又支持拦截这些请求的操作，这就让我们完美的实现了js调oc的操作。至于更高级的方法，我们在以后给大家介绍。

改变原有页面的功能，我们要实现下列需求。

在输入框输入相关信息，点击按钮，将输入的信息传输到oc中；

oc接受到信息后，通过oc调用js的功能将信息发到js；

js收到信息后，在页面显示相关信息。

由于js调用oc是通过url请求发送消息，所以，我们需要制定规范。只有符合我们规范的请求才会执行oc方法，否则不执行。

这里我使用的规范是ios::oc方法名::携带的参数。这样我们在oc端，当发现这样的请求时就开始拦截执行我们的操作。

我这里的三个参数，相信大家都能看懂，我是使用“::”分割，你也可以使用其他方式分割，或者组合你喜欢的规范。

接下来就是改造oc和js了。在BaseVC添加oc接受js调用的方法体，和改写- (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType

#pragma mark - js调OC

- (void)jsCallOC:(NSString*)params {

               NSLog(@"%@:%@", NSStringFromSelector(_cmd), params);NSString*jsStr = [NSStringstringWithFormat:@"ocCallJS('%@')", params];

// oc调js

[self.webViewstringByEvaluatingJavaScriptFromString:jsStr];

}

#pragma mark 网页监听

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

          NSLog(@"%@", NSStringFromSelector(_cmd));

      // 过滤

     NSString*requestString = request.URL.absoluteString.stringByRemovingPercentEncoding;

     // 分割

      NSArray*urlComps = [requestString componentsSeparatedByString:@"::"];

if ( [urlComps count] ==3&& [@"ios"isEqualToString:[urlComps objectAtIndex:0]] ) {

               //解析约定的指令

               // 方法名

              NSString*methods = [NSStringstringWithFormat:@"%@:", [urlComps objectAtIndex:1]];

               SEL selector = NSSelectorFromString(methods);

               // 判断类是否有方法

               if ( [BaseVC instancesRespondToSelector:selector]) {

                          // 携带的参数

                      NSString*params = [urlComps objectAtIndex:2];

                      NSLog(@"JS调用OC代码->UIWebView\n方法名:%@,参数:%@", methods, params);

                           // 执行方法，携带参数

                         [selfperformSelector:selector withObject:params];

                 }else{

                           NSLog(@"没有提供调用的%@方法名",methods);

                   }

                 returnNO;

          }

         returnYES;

}

[self performSelector:selector withObject:params];这段代码的意思是执行当前页面的方法体，并携带参数。我们使用通配的方式调用方法体，使代码更优雅便捷。

然后改变js代码。

运行项目，然后神奇的事情发生了，原来在app中嵌入网页这么简单。

其他

参考资料

UIWebView Class Reference