ios webview html交互,iOS WKWebView与JS(HTML)的交互

在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)

}