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

参考：

iOS下JS与OC互相调用（二）--WKWebView 拦截URL

iOS下JS与原生OC互相调用(总结)

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

html代码：

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8">
        <script language="javascript">
            function loadURL(url) {
                window.location.href = url
            }
            
            function locationClick() {
                loadURL("scheme://getLocation");
            }
            
            function shake() {
                loadURL("scheme://shake");
            }
            
            function setLocation(location) {
                alert(location)
                document.getElementById("returnValue").value = location;
            }
            
        </script>
    </head>
    
    <body>
        <h1>这是按钮调用</h1>
        <input type="button" value="获取定位" onclick="locationClick()" /><br><br>
        <input type="button" value="震动一下" onclick="shake()" /><br><br>
        
        <h1>这是文件上传</h1>
        <input type="file" /><br><br>
        
        <h1>这是回调结果展示区</h1>
        <textarea id ="returnValue" type="value" rows="5" cols="50"></textarea>
        
    </body>
</html>

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

初始化WKWebView加载本地html文件。
点击web中的按钮，web发起URL请求。
URL请求被WKNavigationDelegate中的代理方法拦截。根据自定义的URL识别使用不同的处理方式。如：在- (void)getLocation方法中调用JS的setLocation函数。
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

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

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

详细代码说明

推荐阅读更多精彩内容