webview与js交互

在iOS移动开发过程中，有时会遇到在ios客户端中嵌入web页面的场景。

多数时候该web页面是由第三方应用维护的，此时，如果客户端想触发web页面的某个方法，或者web页面想触发客户端的某个方法，就会涉及以下内容。

简单来说webview与js交互涉及到两方面，C端（客户端）调B端（web页面）js方法，和B端调C端方法。

举两个栗子：

1.某支付app中嵌入了某商城购物页面，该商场要使用app的支付方式进行支付。于是，在app客户端中内嵌的商城订单页面发起支付。

在发起支付的时候，商城页面（即B端）发送url给app（C端），app通过判断url方式，调用其原生方法进行支付。该流程及为B端调C端。

支付成功之后，商城根据app告知的支付结果，即app调用商城页面上的js方法，在页面上弹出支付成功。该流程为C端调B端。

2.某app中嵌入某应用个人资料页面，该应用要使用app中的照相功能或者照片库中的图片。流程参考栗子1。

代码如下：

1.work.html为嵌入app的web页面。（该栗子的web页面放入了app工程中，真实情况大多数为http协议的url）

2.ios中视图控制器中的实现，核心是 shouldStartLoadWithRequest代理方法，对url的判断

@interface ViewController ()
{
    UIWebView * webView_js;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    webView_js = [[UIWebView alloc]initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height)];
    [self.view addSubview:webView_js];
    webView_js.delegate = self;
    NSString *path = [[NSBundle mainBundle]pathForResource:@"work" ofType:@"html"];
    
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:path]];
    [webView_js loadRequest:request];
    // Do any additional setup after loading the view, typically from a nib.
}

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *host = [[request URL] host];
    NSString *scheme = [[[request URL]scheme]lowercaseString];
    //B调C，通过B页面传来的URL，触发C页面的方法
    if ([scheme isEqualToString:@"native"]) {
        if([host isEqualToString:@"openCamera"]){
            NSLog(@"打开照相机...");
            NSString *callbackJs = [NSString stringWithFormat:@"alert('%@')",@"成功打开照相机"];
            //C调B，触发B页面JS方法
            [webView stringByEvaluatingJavaScriptFromString:callbackJs];
        }
    }
    return YES;
}

-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error{
    if (error.code==101) {
        return;
    }
    NSLog(@"错误代码：%ld",(long)error.code);
}


    
    
   
   

<script>
function testLoad(){
window.location = 'native://openCamera';
}
</script>


   
   

    
    
    ［测试页面］