在iOS的网页开发中，时常遇到一些需求，需要和JS(HTML)进行交互。
WKWebView与JS(HTML)的交互，其实就是互调：

• iOS调用JS
• JS调用IOS
  其实就是约定协议和传参的过程。

JS调用iOS

调用的方式有两种：
1- 协议拦截+WKNavigationDelegate的配合实现
2- WKScriptMessageHandler实现

1- 协议拦截

步骤

• 约定协议 jsPassIOSProcol
• WKNavigationDelegate 拦截协议

WKNavigationDelegate.png

2- WKScriptMessageHandler实现

步骤

• 约定协议 jsPassIOSProcol
• 添加消息监听 addScriptMessageHandler
• h5发送协议消息，iOS使用 WKScriptMessageHandler 接收消息
• 取消消息监听 removeScriptMessageHandlerForName

WKScriptMessageHandler.png

对比两种方式

h5代码采取的方式不同：

   //js调用iOS
   function loadUrl(url) {
     window.location.href = url
  }
   function jsPassIOS() { //约定好协议
     var url = "jsPassIOSProcol://" + "jsPassIOSAtion" + "?" + "=params"
     loadUrl(url)
   }

   //js调用iOS
  function loadUrl(url) {
   window.location.href = url
  }
  function jsPassIOSProcol(param1,param2) {
    var url = "jsPassIOSProcol://" + param1 + "?" + param2
    loadUrl(url)
  }
   function jsPassIOS() { //发送jsPassIOSProcol消息
    window.webkit.messageHandlers.jsPassIOSProcol.postMessage("jsPassIOSAtion", "=params");
   }

常用的提示交互

alert

• js端调用alert函数的时候，会触发这个方法；
• mesage: 拿到js端传递的数据；

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

}

confirm

• js端调用confirm函数的时候，会触发这个方法；
• mesage: 拿到js端传递的数据；
• 确认/取消通过completionHandler回调给js端；

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

}

prompt

• js端调用prompt函数的时候，会触发这个方法；
• prompt: 拿到js端传递的数据；
• 在原生将文本内容，通过completionHandler回调给js端；

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

}

系统提示.png

iOS调用JS

调用JS.png

可以下载尝试一下：小Demo

webView的缩放

有两种方法：

• 利用UIScrollViewDelegate方法

webView.scrollView.delegate = self

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

这种方法，有时候是不起作用的，而且在有输入弹框的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)
 }