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