iOS与JS(一)：使用URL拦截的方式进行JS与OC互相调用

参考：

• iOS下JS与OC互相调用（二）--WKWebView 拦截URL
• iOS下JS与原生OC互相调用(总结)

关于WKWebView与UIWebView之间的区别，本文就不在说明，本文只使用WKWebView。
效果图如下：

html代码：

    
        
        
    
    
    
        
这是按钮调用
        


        


        
        
这是文件上传
        


        
        
这是回调结果展示区
        
        
    

以获取定位这个按钮为例说明OC和JS互相调用代码执行流程：

1. 初始化WKWebView加载本地html文件。
2. 点击web中的按钮，web发起URL请求。
3. URL请求被WKNavigationDelegate中的代理方法拦截。根据自定义的URL识别使用不同的处理方式。如：在- (void)getLocation方法中调用JS的setLocation函数。
4. JS的setLocation函数执行JS的alert()函数，被WKUIDelegate中的代理方法捕获，调用iOS原生的弹框。

详细代码说明

• 初始化WKWebView加载本地html文件

    - (void)initWKWebView
    {
        // 1
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        configuration.userContentController = [WKUserContentController new];
        WKPreferences *preferences = [WKPreferences new];
        preferences.javaScriptCanOpenWindowsAutomatically = YES;
        preferences.minimumFontSize = 40.0;
        configuration.preferences = preferences;
        
        self.webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
        
        // 2
        NSString *urlStr = [[NSBundle mainBundle] pathForResource:@"index.html" ofType:nil];
        NSURL *fileURL = [NSURL fileURLWithPath:urlStr];
        [self.webView loadFileURL:fileURL allowingReadAccessToURL:fileURL];
        
        self.webView.navigationDelegate = self;
        self.webView.UIDelegate = self;
        [self.view addSubview:self.webView];
    }
  

  • 1 WKWebView的一些参数配置
  • 2 加载本html

• URL请求被WKNavigationDelegate中的代理方法拦截。也就是JS调用了OC

    #pragma mark - WKNavigationDelegate
    - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler
    {
        NSURL *URL = navigationAction.request.URL;
        NSString *scheme = [URL scheme];
        if ([scheme isEqualToString:@"scheme"]) {
            
            [self handleCustomAction:URL];
            
            decisionHandler(WKNavigationActionPolicyCancel);
            return;
        }
        decisionHandler(WKNavigationActionPolicyAllow);
    }
  

• OC 调用 JS

    - (void)getLocation
    {
        // 将结果返回给js
        NSString *jsStr = [NSString stringWithFormat:@"setLocation('%@')",@"上海市浦东新区"];
        [self.webView evaluateJavaScript:jsStr completionHandler:^(id _Nullable result, NSError * _Nullable error) {
            NSLog(@"%@----%@",result, error);
        }];
    }
  

  • JS代码被当成字符串调用
  • completionHandler是JS代码被调用后回调

• JS中alert弹窗被WKUIDelegate中的代理方法捕获，调用iOS原生的弹框。

    #pragma mark - WKUIDelegate
    - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler
    {
        
        UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"提醒" message:message preferredStyle:UIAlertControllerStyleAlert];
        [alert addAction:[UIAlertAction actionWithTitle:@"知道了" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) {
            completionHandler();
        }]];
        
        [self presentViewController:alert animated:YES completion:nil];
    }
  

最后，html中的文件input可以直接调用iOS的图片库，相机和文件。

代码： 90-iOSJS/OCJS1