一、前言
近日，有朋友问我关于WKWebView与JS的交互问题，可我之前一直使用的是UIWebView，也不曾做过WKWebView的交互啊！接下来大家一块学习下WKWebView是怎么实现原生代码和JS交互的。2016年时候曾写过一篇关于UIWebView与JS的交互。传送门>>>
二、WKWebView
-
支持更多的HTML5的特性
-
高达60fps滚动刷新频率与内置手势
-
与Safari相容的java script引擎
-
在性能、稳定性方面有很大提升占用内存更少 协议方法及功能都更细致
-
可获取加载进度等。
三、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)
四、WKUIDelegate的代理方法
用来做一些页面上的事件，弹窗警告，提醒等。
//接收到警告面板 optional func webView(_ webView: WKWebView, runjava scriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) //接收到确认面板 optional func webView(_ webView: WKWebView, runjava scriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) //接收到输入框 optional func webView(_ webView: WKWebView, runjava scriptTextInputPanelWithPrompt 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('我是弹窗内容')