在iOS的網(wǎng)頁開發(fā)中，時(shí)常遇到一些需求，需要和JS(HTML)進(jìn)行交互。
WKWebView與JS(HTML)的交互，其實(shí)就是互調(diào)：

• iOS調(diào)用JS
• JS調(diào)用IOS
  其實(shí)就是約定協(xié)議和傳參的過程。

JS調(diào)用iOS

調(diào)用的方式有兩種：
1- 協(xié)議攔截+WKNavigationDelegate的配合實(shí)現(xiàn)
2- WKScriptMessageHandler實(shí)現(xiàn)

1- 協(xié)議攔截

步驟

• 約定協(xié)議 jsPassIOSProcol
• WKNavigationDelegate 攔截協(xié)議

WKNavigationDelegate.png

2- WKScriptMessageHandler實(shí)現(xiàn)

步驟

• 約定協(xié)議 jsPassIOSProcol
• 添加消息監(jiān)聽 addScriptMessageHandler
• h5發(fā)送協(xié)議消息，iOS使用 WKScriptMessageHandler 接收消息
• 取消消息監(jiān)聽 removeScriptMessageHandlerForName

WKScriptMessageHandler.png

對比兩種方式

h5代碼采取的方式不同：

   //js調(diào)用iOS
   function loadUrl(url) {
     window.location.href = url
  }
   function jsPassIOS() { //約定好協(xié)議
     var url = "jsPassIOSProcol://" + "jsPassIOSAtion" + "?" + "=params"
     loadUrl(url)
   }

   //js調(diào)用iOS
  function loadUrl(url) {
   window.location.href = url
  }
  function jsPassIOSProcol(param1,param2) {
    var url = "jsPassIOSProcol://" + param1 + "?" + param2
    loadUrl(url)
  }
   function jsPassIOS() { //發(fā)送jsPassIOSProcol消息
    window.webkit.messageHandlers.jsPassIOSProcol.postMessage("jsPassIOSAtion", "=params");
   }

常用的提示交互

alert

• js端調(diào)用alert函數(shù)的時(shí)候，會觸發(fā)這個(gè)方法；
• mesage: 拿到j(luò)s端傳遞的數(shù)據(jù)；

- (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message
initiatedByFrame:(WKFrameInfo *)frame
completionHandler:(void (^)(void))completionHandler {

}

confirm

• js端調(diào)用confirm函數(shù)的時(shí)候，會觸發(fā)這個(gè)方法；
• mesage: 拿到j(luò)s端傳遞的數(shù)據(jù)；
• 確認(rèn)/取消通過completionHandler回調(diào)給js端；

-(void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message
initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler {

}

prompt

• js端調(diào)用prompt函數(shù)的時(shí)候，會觸發(fā)這個(gè)方法；
• prompt: 拿到j(luò)s端傳遞的數(shù)據(jù)；
• 在原生將文本內(nèi)容，通過completionHandler回調(diào)給js端；

- (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt
    defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame
completionHandler:(void (^)(NSString * _Nullable result))completionHandler {

}

系統(tǒng)提示.png

iOS調(diào)用JS

調(diào)用JS.png

可以下載嘗試一下：小Demo

webView的縮放

有兩種方法：

• 利用UIScrollViewDelegate方法

webView.scrollView.delegate = self

 func viewForZooming(in scrollView: UIScrollView) -> UIView? {
   return nil
 }

這種方法，有時(shí)候是不起作用的，而且在有輸入彈框的h5，彈框不會隨著鍵盤上下移動。

• 往h5中，寫入適配的js代碼

 func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
   //禁止縮放
   let javascript = "var meta = document.createElement('meta');meta.setAttribute('name', 'viewport');meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no');document.getElementsByTagName('head')[0].appendChild(meta);"
   webView.evaluateJavaScript(javascript, completionHandler: nil)
 }