iOS开发WKWebView与JavaScript交互详解

iOS开发中或多或少会嵌入h5页面，h5页面有时需要和原生进行交互：比如h5界面需要通知原生处理一些事情（如拍照等），原生界面需要传参给h5界面（如拍照的图片数据）；由于iOS现在已弃用UIWebView，今天主要详细梳理下WKWebView和JavaScript交互细节；

demo准备

完整代码
为了说明WKWebView和JavaScript的交互，搭建了一个简单的界面：

iOS界面：

蓝色为原生button
红色为原生label
青色为webview界面(加载本地html)，带有h5的button

webview = WKWebView(frame: CGRect(x: 0, y: label.frame.maxY, width:
view.bounds.width, height: 200))
view.addSubview(webview)
let fileURL = Bundle.main.url(forResource: "iOSTest", withExtension: "html")
webview.loadFileURL(fileURL!, allowingReadAccessTo: Bundle.main.bundleURL)

iOSTest.html代码：




  
  
  
  iOS WKWebView 交互

提示框

h5的button编写了一个alert弹框的代码，在浏览器上打开点击按钮能正常显示提示框；但在我们这个代码WKWebView中却没任何反应；
这是因为WKWebView默认是不显示h5弹框的，需要手动编写代码提示原生的弹框；

设置webview的ui代理

webview.uiDelegate = self

实现协议，拦截弹框事件；协议方法有3个，对应1个按钮的提示框，2个按钮的及带输入框的提示框；可以通过回调的方法取得提示框的内容，然后使用原生的提示框：

extension ViewController: WKUIDelegate {
    // 只有一个 按钮的Alert
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        let alertController = UIAlertController(title: "js alert", message: message, preferredStyle: .alert)
        alertController.addAction(
            UIAlertAction(title: "ok", style: .default, handler: { _ in
                completionHandler()
            })
        )

        present(alertController, animated: true)
    }

    // 两个按钮的 调用block返回yes或者no来确定是点击了取消按钮还是同意按钮
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        // 原生的弹框... completionHandler(true)
    }

    // 带输入框的alert completionHandler可以回调给js输入框输入的内容
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        // 原生的弹框... completionHandler("xxx")
    }
}

iOS调用JS

WKWebView提供了执行JS的方法evaluateJavaScript

/* @abstract Evaluates the given JavaScript string.
 @param javaScriptString The JavaScript string to evaluate.
 @param completionHandler A block to invoke when script evaluation completes or fails.
 @discussion The completionHandler is passed the result of the script evaluation or an
error.

*/
open func evaluateJavaScript(_ javaScriptString: String, completionHandler: ((Any?, Error?) -> Void)? = nil)

使用比较简单：

// webview调用js 已有函数
webview.evaluateJavaScript("jsFunction()") {[weak self] (data, _) in
    self?.label.text = data as? String ?? "data error"
}

// webview调用js 已有函数(带参数)
webview.evaluateJavaScript("jsFunctionParameter('wkWebview')") {[weak self] (data, _)
in
    self?.label.text = data as? String ?? "data error"
}

点击原生button时调用以上evaluateJavaScript，可以发现能正常调用JS：

iOS注入JS代码

另一种iOS调用JS的方式是通过添加WKUserScript注入的方式；

let webConfig = WKWebViewConfiguration()
let webUserController = WKUserContentController()
// 注入js
let injectionScript = WKUserScript(source:"jsFunctionParameter('wkWebview')", injectionTime: .atDocumentEnd,
forMainFrameOnly: true)
webUserController.addUserScript(injectionScript)
webConfig.userContentController = webUserController
// 通过自定义config的方式创建webview
webview = WKWebView(frame: CGRect(x: 0, y: label.frame.maxY, width:
view.bounds.width, height: 200), configuration: webConfig)
....

以上代码和之前evaluateJavaScript的方式效果一样；

evaluateJavaScript和addUserScript的区别

1 . 调用时机不同：
evaluateJavaScript可以在任何需要的时候调用（比如点击哪个原生的按钮）；而addUserScript注入JS的方式只有2种时机

public enum WKUserScriptInjectionTime : Int {
    // Document加载前
    case atDocumentStart = 0
    // Document加载后
    case atDocumentEnd = 1
}

作用不同

从2者的API名称可以看出，evaluateJavaScript侧重于调用JS现有的代码；addUserScript侧重于添加JS代码（即原先JS没有对应的代码）
例如，使用addUserScript可以为h5动态添加元素：

let script = "var p = document.createElement('p'); p.innerHTML='injection from
WKWebView'; document.getElementsByTagName(\"body\")[0].appendChild(p);"
let injectionScript = WKUserScript(source: script, injectionTim
forMainFrameOnly: true)
webUserController.addUserScript(injectionScript)
webConfig.userContentController = webUserController
webview = WKWebView(frame: CGRect(x: 0, y: label.frame.maxY, wi
view.bounds.width, height: 200), configuration: webConfig)
....

重新运行代码，可以看到webview上已多了个p标签：

但是对于这点其实也没有严格的要求，两者都能实现新增JS代码、调用已有JS代码；

evaluateJavaScript能取得JS的返回值，addUserScript没有返回值

JS调用iOS

JS调用iOS，WKWebView提供了scriptMessageHandler的API:

WKWebView添加scriptMessageHandler

let webConfig = WKWebViewConfiguration()
let webUserController = WKUserContentController()
// 为防止循环引用，自定义WeakScriptMessageDelegate封装了一层delegate
let scriptDelegate = WeakScriptMessageDelegate(delegate: self)
webUserController.add(scriptDelegate, name: WebScriptHandlerName.clickButton)
webConfig.userContentController = webUserController
webview = WKWebView(frame: CGRect(x: 0, y: label.frame.maxY, widt
view.bounds.width, height: 200), configuration: webConfig)
....

JS端messageHandlers需要发送事件通知WKWebView:

// html


// script
function jsCalliOS() {
    // 无参数
    // postMessage必须带参数 否则iOS收不到回调，无参数空值如postMessage({})
    window.webkit.messageHandlers.clickButton.postMessage({})
    
    // 带参数
    window.webkit.messageHandlers.clickButton.postMessage('js_parameter')
}

window.webkit.messageHandlers固定写法，后面的clickButton为handler名称需要和iOS中webUserController.add(scriptDelegate, name: WebScriptHandlerName.clickButton)，name一致；

iOS端接收JS的回调（实现WKScriptMessageHandler协议方法）处理自己的逻辑，即实现了JS调用iOS

extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == WebScriptHandlerName.clickButton {
            // 无参数
            print("call from js")
            // openCamera()...
            
            // 带参数 Allowed types are NSNumber, NSString, NSDate, NSArray,NSDictionary,NSNull
            guard let parameter = message.body as? String else { return }
            print("call from js " + parameter)
            // openCamera(parameter)
        }
    }
}

JS调用iOS并获取iOS的返回值

以上JS调用iOS的交互，存在一个问题；比如调用了iOS代码并需要得到iOS处理的结果，JS怎么才能获取到这个返回值呢？WKWebView貌似并没有提供相关的API；
这时，我们就需要结合上面的提到过的知识，曲折、间接的实现返回值的功能；

通过提示框的方式实现
之前提到的，提示框的回调有3种；其中runJavaScriptTextInputPanelWithPrompt这种是能拿到h5提示框的内容，同时还能回传iOS输入的内容；这种情况正符合这种JS、iOS交互需求；

h5代码修改

// script
function jsCalliOS() {
    // prompt弹框 result即为iOS输入框completionHandler回调回来的
     var result = prompt('clickButton')
     var p = document.getElementsByTagName('body')[0]
     p.innerHTML = result
}

iOS端代码

// 带输入框的alert completionHandler可以回调给js输入框输入的内容
func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String,
defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler:
@escaping (String?) -> Void) {
    if prompt == "clickButton" {
        completionHandler("result from wkwebview")
    }
}

这种方式很好的利用了prompt特性，但是也存在一些问题；如果该h5不是在iOS上打开而是在其他端（浏览器、安卓）打开，由于它们不同于iOS的WKWebView，prompt就会正常弹出；因此这种方式还需要额外判断环境；

JS调iOS，再让iOS调用JS
JS调用iOS的方式同上；
JS和iOS 2端约定一个新的function用于接收iOS返回值

// script
function getClickButtonResult(parameter) {
    var p = document.getElementsByTagName('body')[0]
    p.innerHTML = parameter
}

iOS端在收到JS调用回调时，再主动调用刚约定的JS的接收返回值的function：

func userContentController(_ userContentController: WKUserContentController, didReceive
message: WKScriptMessage) {
    if message.name == WebScriptHandlerName.clickButton {
        // js调用webview, webview再调用js  将需要的返回值通过参数带入
        webview.evaluateJavaScript("getClickButtonResult('result from wkwebview')")
    }
}

这种方式没有环境问题，但相对来说比较麻烦；

无法修改h5源码的情况，JS与WKWebView的交互

大部分情况，h5都是自己或者同事编写的；JS与WKWebView的交互只需要按照上面的方式2端编码就行；但如果我们用的别人的h5，肯定不会有我们需要的交互代码；
这时，我们还是可以通过注入JS的方式动态实现：

浏览器查看h5源码，想方设法取到需要交互的节点（如通过id,tag）；例如事件的button id=mm_btn，则可以注入以下代码：

let script = """
            function injectionJsCalliOS() {
                window.webkit.messageHandlers.clickButton.postMessage({})
            };
            var button = document.getElementById('mm_btn');
            button.onclick = injectionJsCalliOS;
            """
let injectionScript = WKUserScript(source: script, injection
forMainFrameOnly: true)
webUserController.addUserScript(injectionScript)
webConfig.userContentController = webUserController

之后，iOS端仍一样处理：

func userContentController(_ userContentController: WKUserContentController, didReceive
message: WKScriptMessage) {
    if message.name == WebScriptHandlerName.clickButton {
        // 无参数
        print("call from js")
        // openCamera()...
}

WebViewJavascriptBridge

上面我们使用了系统提供的API实现了交互，过程相对繁琐；
现有一个轻量的第三方库WebViewJavascriptBridge，能大大简化交互流程；
github主页

iOS端WKWebView不再需要添加scriptMessageHandler，取而代之使用WebViewJavascriptBridge：

webview = WKWebView(frame: CGRect(x: 0, y: label.frame.maxY, width: view.bounds.width, height: 200))
...
webBridge = WebViewJavascriptBridge(webview)

WebViewJavascriptBridge调用JS：

// 无参数
webBridge.callHandler("jsFunction", data: nil) {[weak self] (rps) in
    self?.label.text = rps as? String ?? "data error"
}
// 带参数
webBridge.callHandler("jsFunction", data: "wkWebview") {[weak self] (rps) in
    self?.label.text = rps as? String ?? "data error"
}

WebViewJavascriptBridge添加scriptMessageHandler供JS调用（responseCallback可以直接返回值给JS，不用向系统API那样麻烦）：

webBridge.registerHandler(WebScriptHandlerName.clickButton) { (data,
responseCallback) in
    print("CalliOSFunction with JSParameter" + (data as? String ?? ""))
    // 返回值给JS
    responseCallback?("result from wkwebview")
}

JS代码

// script
function setupWebViewJavascriptBridge(callback) {
    // 官方指定固定写法
    if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
    if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
    window.WVJBCallbacks = [callback];
    var WVJBIframe = document.createElement('iframe');
    WVJBIframe.style.display = 'none';
    WVJBIframe.src = 'https://__bridge_loaded__';
    document.documentElement.appendChild(WVJBIframe);
    setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}

setupWebViewJavascriptBridge(function(bridge) {
    /* Initialize your app here */
    bridgeObj = bridge

    // 添加Handler供iOS端调用
    bridge.registerHandler('jsFunction', function(data, responseCallback) {
        //data就是从iOS获取的值 responseCallback返回给iOS的值
        responseCallback((data === undefined ? '' : data) + 'CallJSFunction')
    })
})

JS调用iOS：

// script
function jsCalliOS() {
    //-----------------------WebViewJavascriptBridge API--------------------------
    
    bridgeObj.callHandler('clickButton', 'js_parameter', function(rsp) {
        var p = document.getElementsByTagName('body')[0]
        p.innerHTML = rsp
    })
    
    //----------------------------------------------------------------------------
}

ps：
Handler的名称2端同样需要约定一致；
使用了WebViewJavascriptBridge，不要再手动添加scriptMessageHandler；否则WebViewJavascriptBridge所有交互都会不生效；

扩展

Android WebView与JS的交互

WebView调用JS

// Android 4.4
webView.loadUrl("javascript:androidCallJS()");

// Android 4.4以上， 第二个参数为闭包可以获取JS返回值
webview.evaluateJavascript("javascript:androidCallJS()", null)

JS调用Android
Android代码

webView.addJavascriptInterface(new MyJavascriptInterface(this), "injectedObject");

public class MyJavascriptInterface {
    private Context context;

    public MyJavascriptInterface(Context context) {
        this.context = context;
    }

    @JavascriptInterface
    public void clickButton(String data) {
        
    }
}

JS代码

// script
window.injectedObject. 
clickButton('call from js')

参考：https://www.jianshu.com/p/97f52819a19d

WinForm CefSharp与JS的交互

CefSharp调用JS

webView.ExecuteScriptAsync("CefSharpCallJS()");

JS调用CefSharp
WinForm代码

// 将c#对象注册为 js对象
public class JsEvent 
{    
  public void ClickButton(string parameter) 
    { 
      .....
    } 
} 

webview.RegisterJsObject("injectedObject", new JsEvent(), false)