A simple example of how to do communication from javascript in a WKWebView
to iOS native and vice versa using Swift 3 without pulling in a full framework
like Cordova.
To make calls from native to javascript, create a Javascript instance
with your WKWebView:
class ViewController: UIViewController {
var webView: WKWebView?
var javascript: Javascript?
// ...
override func viewDidLoad() {
self.webView = WKWebView(frame: webFrame, configuration: config)
self.javascript = Javascript(webView: self.webView!)
}
}Then wherever you want to run JS from the UI:
// inside some function
self.javascript!.exec("WebView.handleCallFromNative(\(newText))", completion: { (result: JavascriptResult) in
//example of how to check for an error message
if let errorMessage = result.errorMessage {
print(errorMessage)
}
else if let retVal = result.returnValue {
print("Javascript Returned Value: '\(retVal)'")
}
print("result: \(result)")
})To make calls from your javascript to native some additional set up is required.
-
Create a new
NativeMethodManager()and pass it aWKWebViewConfiguration()to work with:let config = WKWebViewConfiguration() let methodManager = NativeMethodManager(configuration: config)
-
Then, add the methods you want to it using
addMethod():methodManager.addMethod(name: "callNative", method: { (message) in //message is Any? type, so it must be cast. if let name = message as? String { print ("Quack, \(name)") } print("Received `callNative` with message: '\(message)'") })
-
Now your method will be available from the javascript under the
window.webkit.messageHandlersobject and can be invoked by callingpostMessage()on your object:window.webkit.messageHandlers.callNative.postMessage(message);
In this example
callNativeis the name of the method we set up in theaddMethod(name:method:)call from step 2. If we had named the methodsquishin step 2, we could have to callwindow.webkit.messageHandlers.squish.postMessage(message);