UIWebView+Interaction、WKScriptMessageHandler -->WKWebView+Interactio..."/>
溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

IOS中UIWebView、WKWebView之JS交互

發(fā)布時間：2020-10-09 03:42:41 來源：腳本之家 閱讀：242 作者：小小棒棒糖 欄目：移動開發(fā)

做客戶端開發(fā)，肯定避免不了JS交互，于是自己對蘋果接口做了個簡易封裝：

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

代碼非常簡潔，見這里：https://github.com/V5zhou/JSInteraction.git

舊方式

舊的交互方式有通過UIWebViewDelegate實(shí)現(xiàn)的：JS與客戶端定義好跳轉(zhuǎn)頁面參數(shù)，在將要跳轉(zhuǎn)時捕獲關(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;
    }
  }];
}

添加動作

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

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

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

其中callBack是通過這個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按鈕，我沒猜錯！')"];

JS調(diào)OC:

//注冊交互類型
  [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;
    }
  }];

添加動作

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

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

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

其中callBack是通過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);
    }
  });
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手