IOS中UIWebView、WKWebView之JS交互

更新時(shí)間：2017年06月13日 09:31:02 作者：小小棒棒糖

本篇文章主要介紹了IOS中UIWebView、WKWebView之JS交互，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

做客戶端開(kāi)發(fā)，肯定避免不了JS交互，于是自己對(duì)蘋(píng)果接口做了個(gè)簡(jiǎn)易封裝：

JSExport-->UIWebView+Interaction、WKScriptMessageHandler -->WKWebView+Interaction以備以后使用。

代碼非常簡(jiǎn)潔，見(jiàn)這里：https://github.com/V5zhou/JSInteraction.git

舊方式

舊的交互方式有通過(guò)UIWebViewDelegate實(shí)現(xiàn)的：JS與客戶端定義好跳轉(zhuǎn)頁(yè)面參數(shù)，在將要跳轉(zhuǎn)時(shí)捕獲關(guān)鍵字，然后處理業(yè)務(wù)。

iOS端：

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
  NSString *urlString = [[request URL] absoluteString];
  if ([urlString isEqualToString:@"objc://loading"]) {
    if (_gotoRootViewController) {
      _gotoRootViewController();
    }
  }
  return YES;
}

JS端：

<!DOCTYPE html>
<html>
  <title>test</title>
  <meta charset="utf-8">
    <body>
      <a href="javascript:document.location = 'objc://loading'" rel="external nofollow" class="btn">這是交互按鈕</a>
    </body>
</html>

UIWebView+JSExport方式

導(dǎo)入JavaScriptCore.framework，并導(dǎo)入我的擴(kuò)展類#import "UIWebView+Interaction.h"。

使用方式

OC調(diào)JS：

[_webView InterActionToJs:@"alertMobile('15625298071')"];

JS調(diào)OC:

- (void)webViewDidFinishLoad:(UIWebView *)webView {
  [self.webView InterActionToOc:^(InterActionOcType functionType, NSDictionary *param) {
    switch (functionType) {
      case InterActionOcType_alert:
      {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:param[@"title"] message:param[@"content"] delegate:nil cancelButtonTitle:nil otherButtonTitles:@"確定", nil];
        [alert show];
      }
        break;
      case InterActionOcType_present:
      {
        self.modalTransitionStyle = UIModalTransitionStyleCrossDissolve;
        Class Cls = NSClassFromString(param[@"toController"]);
        BOOL isAnimate = [param[@"animate"] boolValue];
        UIViewController *ctl = [[Cls alloc] init];
        [self presentViewController:ctl animated:isAnimate completion:nil];
      }
        break;

      default:
        break;
    }
  }];
}

添加動(dòng)作

//自定義添加功能類型
typedef NS_ENUM(NSUInteger, InterActionOcType) {
  InterActionOcType_alert = 0,
  InterActionOcType_present,
  InterActionOcType_xxxxxxx,   //有啥需求就和這里添加
};

并且對(duì)應(yīng)的html中添加JS,參數(shù)封裝為字典形式。例：

function myPresent(ctl) {
      var param = new Array();
      param["animate"] = 1;
      param["toController"] = "SecondViewController";
      WebViewInteraction.callBack(1, param);
    }

其中callBack是通過(guò)這個(gè)JSExport實(shí)現(xiàn)的

@protocol WebViewJSExport <JSExport>
JSExportAs
(callBack /** callBack 作為js方法的別名 */,
 - (void)awakeOC:(InterActionOcType)type param:(NSDictionary *)param
 );
@end

WKWebView+WKScriptMessageHandler方式

導(dǎo)入WebKit.framework，并導(dǎo)入我的擴(kuò)展類#import "WKWebView+Interaction.h"。

使用方式

OC調(diào)JS：

[self.wkWebView InterActionToJs:@"JSReloadTitle('你點(diǎn)了刷新JS按鈕，我沒(méi)猜錯(cuò)！')"];

JS調(diào)OC:

//注冊(cè)交互類型
  [self.wkWebView registerScriptTypes:@{@"OCDismiss" : @(WKInterActionOcType_dismiss),
                     @"OCShowAlert" : @(WKInterActionOcType_alert)}];

  [self.wkWebView InterActionToOc:^(WKInterActionOcType functionType, NSDictionary *param) {
    switch (functionType) {
      case WKInterActionOcType_dismiss:
      {
        BOOL isAnimate = [param[@"animate"] boolValue];
        [self dismissViewControllerAnimated:isAnimate completion:nil];
      }
        break;
      case WKInterActionOcType_alert:
      {
        UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"JS去做平方" message:nil delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"確定", nil];
        alert.alertViewStyle = UIAlertViewStylePlainTextInput;
        [alert show];
      }
        break;
      default:
        break;
    }
  }];

添加動(dòng)作

//自定義添加功能類型
typedef NS_ENUM(NSUInteger, WKInterActionOcType) {
  WKInterActionOcType_alert = 0,
  WKInterActionOcType_dismiss,
  WKInterActionOcType_xxxxxxx,   //有啥需求就和這里添加
};

并且對(duì)應(yīng)的html中添加JS,參數(shù)封裝為字典形式。例：

//js調(diào)oc
function myDismiss() {
  window.webkit.messageHandlers.OCDismiss.postMessage({"animate" : 1});  //這里的OCDismiss對(duì)應(yīng)注冊(cè)類型
}

其中callBack是通過(guò)WKScriptMessageHandler實(shí)現(xiàn)的

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
  dispatch_async(dispatch_get_main_queue(), ^{
    NSString *name = message.name;
    NSDictionary *value = message.body;
    WKInterActionOcType type = [self.typeDict[name] integerValue];
    if (self.block) {
      self.block(type, value);
    }
  });
}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: