UIWebView与js(JavaScript)交互

最近开发的项目中用到了UIWebView和js的交互，在此总结一下，希望能够帮助到需要的同学。

首先描述一下需求，在商城（webView）的某一个界面，需要实现退换货时上传商品图片的功能，具体流程如下：

1.点击UIWebView上的一个按钮时弹出iOS中的UIActionSheet

2.调用相机或相册选择图片后上传图片至服务器

3.上传成功后调用html5的方法并将服务器返回的imageId做为参数传入

4.html5根据imageId从服务器获取图片然后显示

界面效果图

 

下面是具体的实现步骤及代码：

1.html5端会在添加按钮的地方添加 href="js-call://uploadImage() "，类似一个链接网址，当点击这个按钮时，我们可以通过UIWebView的代理方法截获这个地址，通过解析地址,我们就知道要做的操作了

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
	//获取请求地址
    NSString *requestString = [[request URL] absoluteString];
  NSString *protocol = @"js-call://uploadImage()";
	//检查地址
    if ([requestString hasPrefix:protocol]) {
	//显示选择列表
        UIActionSheet *actionSheet =
       [[UIActionSheet alloc]initWithTitle:@"上传图片"
                                  delegate:self
                         cancelButtonTitle:@"取消"
                    destructiveButtonTitle:@"拍照"
                         otherButtonTitles:@"图库", @"相册",nil];
       [actionSheet showInView:self.view];
       return NO;
   }
     return YES;
}

2.处理选择列表代理方法

-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{

   if (buttonIndex == 0) {

       //相机

       [self pickImageWithSourceType:

        UIImagePickerControllerSourceTypeCamera];

   }else if (buttonIndex == 1){

       //图库

       [self pickImageWithSourceType:

        UIImagePickerControllerSourceTypePhotoLibrary];

   }else if(buttonIndex == 2){

       //相册

       [self pickImageWithSourceType:

        UIImagePickerControllerSourceTypeSavedPhotosAlbum];

   }else if(buttonIndex == 3){

  //取消

   }

}

3.选择并上传图片

- (void)pickImageWithSourceType:(UIImagePickerControllerSourceType)sourceType{
   UIImagePickerController *imagePicker = [[UIImagePickerController alloc] init];
   imagePicker.delegate = self;
   if ([UIImagePickerController isSourceTypeAvailable:
        sourceType]) {
       imagePicker.sourceType = sourceType;
   }else{
       UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"照片获取失败"
                                                           message:@"没有可用的照片来源"
                                                          delegate:nil
                                                 cancelButtonTitle:@"确定"
                                                 otherButtonTitles:nil, nil];
       [alertView show];
       return;
   }
   [self presentViewController:imagePicker animated:YES completion:nil];
}

//获取图片成功
- (void)imagePickerController:(UIImagePickerController *)picker
didFinishPickingMediaWithInfo:(NSDictionary *)info{
   UIImage *image = [info objectForKey:@"UIImagePickerControllerOriginalImage"];
   [self dismissViewControllerAnimated:YES completion:nil];
//在此调用接口将图片上传至服务器，省略
//上传图片代码...
}

//取消操作
- (void)imagePickerControllerDidCancel:(UIImagePickerController *)picker{
   [self dismissViewControllerAnimated:YES completion:nil];
}

4.上传图片成功后调用html5方法

//传入接口返回的imageId，其中_orderWebView是显示改界面的UIWebView
[_orderWebView stringByEvaluatingJavaScriptFromString:[NSStringstringWithFormat:@"%@('%@')",@"uploadImage()",imageId]];

这样就完成了UIWebView和html5的相互调用，总结起来就是，html5调用iOS是通过截获地址来实现，而iOS调用 html5的方法则通过UIWebView中的 stringByEvaluatingJavaScriptFromString:方法实现。

通过stringByEvaluatingJavaScriptFromString:方法还可以获取网页的标题，地址等信息，如：

//获取当前页面的url
</pre><br /></p><p><span style="font-family:Menlo;font-size:14px;color:#703daa;line-height: 24px; white-space: normal;"><span class="com">NSString</span></span><span style="font-family:Menlo;font-size:14px;line-height: 24px; white-space: normal;"><span class="com"> *currentURL =[webView</span></span><span style="font-family:Menlo;font-size:14px;color:#3d1d81;line-height: normal; white-space: normal;"><span class="com">stringByEvaluatingJavaScriptFromString</span></span><span style="font-family:Menlo;font-size:14px;line-height: 24px; white-space: normal;"><span class="com">:</span></span><span style="font-family:Menlo;font-size:14px;color:#d12f1b;line-height: 24px; white-space: normal;"><span class="com">@"document.location.href"</span></span><span style="font-family:Menlo;font-size:14px;line-height: 24px; white-space: normal;"><span class="com">];</span></span></p>
//获取当前页面的title
NSString *title = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
看到网上还有使用该方法修改界面元素的值，表单提交，插入js代码操作的，并未做太多研究，等研究明白了再总结下来，欢迎指点。