【Swift】WKWebView与JS的交互使用
一、前言
近日，有朋友问我关于WKWebView与JS的交互问题，可我之前一直使用的是UIWebView，也不曾做过WKWebView的交互啊！接下来大家一块学习下WKWebView是怎么实现原生代码和JS交互的。
二、WKWebView
-
支持更多的HTML5的特性
-
高达60fps滚动刷新频率与内置手势
-
与Safari相容的JavaScript引擎
-
在性能、稳定性方面有很大提升占用内存更少 协议方法及功能都更细致
-
可获取加载进度等。
三、WKWebView的代理方法
/*! @abstract The web view's navigation delegate. */
weak open var navigationDelegate: WKNavigationDelegate?
/*! @abstract The web view's user interface delegate. */
weak open var uiDelegate: WKUIDelegate?
三、WKNavigationDelegate的代理方法
`//判断链接是否允许跳转`
`optional func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: ``@escaping` `(WKNavigationActionPolicy) -> Void)`
`//拿到响应后决定是否允许跳转`
`optional func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: ``@escaping` `(WKNavigationResponsePolicy) -> Void)`
`//链接开始加载时调用`
`optional func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!)`
`//收到服务器重定向时调用`
`optional func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!)`
`//加载错误时调用`
`optional func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error)`
`//当内容开始到达主帧时被调用（即将完成）`
`optional func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!)`
`//加载完成`
`optional func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!)`
`//在提交的主帧中发生错误时调用`
`optional func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error)`
`//当webView需要响应身份验证时调用(如需验证服务器证书)`
`optional func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: ``@escaping` `(URLSession.AuthChallengeDisposition, URLCredential?) -> Void)`
`//当webView的web内容进程被终止时调用。(iOS 9.0之后)`
`optional func webViewWebContentProcessDidTerminate(_ webView: WKWebView)`
作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：642363427，不管你是小白还是大牛欢迎入驻 ，分享BAT,阿里面试题、面试经验，讨论技术， 与2800+iOS开发者一起交流学习成长！
四、WKUIDelegate的代理方法
用来做一些页面上的事件，弹窗警告，提醒等。
//接收到警告面板
optional func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void)
//接收到确认面板
optional func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void)
//接收到输入框
optional func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void)
五、WKWebView与JS的交互使用
首页创建html文件，代码如下：
<html lang="en">
<head>
<meta charset="utf-8" />
<title>JS交互</title>
<style>
body {
font-size:30px;
text-align:center;
}
* {
margin: 30px;
padding: 0;
}
h1{
color: red;
}
button{
width: 300px;
height: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>WKWebview与iOS交互</h1>
<h2></h2>
<button onclick="testA()">点击alert弹框</button>
<button onclick="testB('我是弹窗内容')">点击alert有参弹窗</button>
<button onclick="testConfrim()">点击confrim弹窗</button>
<button onclick="buttonAction()">向iOS端传递数据</button>
<script type="text/javascript">
//无参数函数
function testA() {
alert("我是JS中的弹窗消息");
}
//有参数函数
function testB(value) {
alert(value);
}
function testC(value) {
return value + "value";
}
//接受iOS端传过来的参数，
function testObject(name,age) {
var object = {name:name,age:age};
return object;
}
function testConfrim() {
comfirm("确定修改数据吗？")
}
function buttonAction(){
try {
<!-- js 向iOS 传递数据-->
window.webkit.messageHandlers.getMessage.postMessage("我是js传递过来的数据")
}catch (e) {
console.log(e)
}
}
</script>
</body>
</html>
1、iOS调用js中的方法进行并传参
//案例1
self.webView?.evaluateJavaScript("testInput('123')", completionHandler: { (data
, error) in
print(data as Any)
})
//案例2
self.webView?.evaluateJavaScript("testObject('xjf',26)", completionHandler: { (data, err) in
print("\(String(describing: data)),\(String(describing: err))")
})
2、js向iOS传递数据
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
print("\(message.name)" + "\(message.body)")
// message.name 方法名
// message.body 传递的数据
}
3、在js中点击按钮，进行弹窗实现
//MARK:WKUIDelegate
//此方法作为js的alert方法接口的实现，默认弹出窗口应该只有提示消息，及一个确认按钮，当然可以添加更多按钮以及其他内容，但是并不会起到什么作用
//点击确认按钮的相应事件，需要执行completionHandler，这样js才能继续执行
////参数 message为 js 方法 alert(<message>) 中的<message>
func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
let alertViewController = UIAlertController(title: "提示", message:message, preferredStyle: UIAlertController.Style.alert)
alertViewController.addAction(UIAlertAction(title: "确认", style: UIAlertAction.Style.default, handler: { (action) in
completionHandler()
}))
self.present(alertViewController, animated: true, completion: nil)
}
// confirm
//作为js中confirm接口的实现，需要有提示信息以及两个相应事件， 确认及取消，并且在completionHandler中回传相应结果，确认返回YES， 取消返回NO
//参数 message为 js 方法 confirm(<message>) 中的<message>
func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
let alertVicwController = UIAlertController(title: "提示", message: message, preferredStyle: UIAlertController.Style.alert)
alertVicwController.addAction(UIAlertAction(title: "取消", style: UIAlertAction.Style.cancel, handler: { (alertAction) in
completionHandler(false)
}))
alertVicwController.addAction(UIAlertAction(title: "确定", style: UIAlertAction.Style.default, handler: { (alertAction) in
completionHandler(true)
}))
self.present(alertVicwController, animated: true, completion: nil)
}
// prompt
//作为js中prompt接口的实现，默认需要有一个输入框一个按钮，点击确认按钮回传输入值
//当然可以添加多个按钮以及多个输入框，不过completionHandler只有一个参数，如果有多个输入框，需要将多个输入框中的值通过某种方式拼接成一个字符串回传，js接收到之后再做处理
//参数 prompt 为 prompt(<message>, <defaultValue>);中的<message>
//参数defaultText 为 prompt(<message>, <defaultValue>);中的 <defaultValue>
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
let alertViewController = UIAlertController(title: prompt, message: "", preferredStyle: UIAlertController.Style.alert)
alertViewController.addTextField { (textField) in
textField.text = defaultText
}
alertViewController.addAction(UIAlertAction