UIWebView与js(JavaScript)交互
2014-08-22 09:17
375 查看
最近开发的项目中用到了UIWebView和js的交互,在此总结一下,希望能够帮助到需要的同学。
首先描述一下需求,在商城(webView)的某一个界面,需要实现退换货时上传商品图片的功能,具体流程如下:
1.点击UIWebView上的一个按钮时弹出iOS中的UIActionSheet
2.调用相机或相册选择图片后上传图片至服务器
3.上传成功后调用html5的方法并将服务器返回的imageId做为参数传入
4.html5根据imageId从服务器获取图片然后显示
界面效果图
下面是具体的实现步骤及代码:
1.html5端会在添加按钮的地方添加 href="js-call://uploadImage()",类似一个链接网址,当点击这个按钮时,我们可以通过UIWebView的代理方法截获这个地址,通过解析地址,我们就知道要做的操作了
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.选择并上传图片
4.上传图片成功后调用html5方法
这样就完成了UIWebView和html5的相互调用,总结起来就是,html5调用iOS是通过截获地址来实现,而iOS调用html5的方法则通过UIWebView中的stringByEvaluatingJavaScriptFromString:方法实现。
通过stringByEvaluatingJavaScriptFromString:方法还可以获取网页的标题,地址等信息,如:
首先描述一下需求,在商城(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 *)pickerdidFinishPickingMediaWithInfo:(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代码操作的,并未做太多研究,等研究明白了再总结下来,欢迎指点。
相关文章推荐
- UIWebView与JavaScript(JS) 回调交互
- UIWebView 与 JS 交互(1):Objective-C 调用 Javascript
- iOS---UIWebView与JavaScript(JS) 回调交互
- UIWebView中JS与OC交互 WebViewJavascriptBridge的使用
- JS与UIWebview交互原理摘记(WebViewJavascriptBridge)
- UIWebView与JavaScript(JS) 回调交互(oc与js交互)
- UIWebView与JavaScript(JS) 回调交互
- WKWebView与JS交互,UIWebView+JavascriptCore和JS交互
- UIWebView---JavaScriptCore和JS交互
- UIWebView 与 JS 交互(1):Objective-C 调用 Javascript
- UIWebView与JavaScript(JS) 回调交互 -备
- UIWebView与JavaScript(JS) 回调交互
- UIWebView与JavaScript(JS) 回调交互[详细解读1]
- 【iOS开发】UIWebView与JavaScript(JS) 回调交互
- 【iOS开发】UIWebView与JavaScript(JS) 回调交互
- 【iOS开发】UIWebView与JavaScript(JS) 回调交互
- iOS UIWebView 与 JavaScript 交互 代码实现 嵌入 js 脚本
- UIWebView与js(javascript) 的交互 示例
- UIWebView 与 JS 交互(1): stringByEvaluatingJavaScriptFromString方法的调用
- iOS开发之Objective-C与JavaScript的交互-UIWebView-stringByEvaluatingJavaScriptFromString