使用 Javascript 处理 HTML 和 Swift 之间的交互

Question

WKWebView 无法在加载的网页中触发 javascript。

场景：如果用户单击网站中的图像，它应该得到更新。

如果用户单击图像，则使用 javascript 更新网站上的图像。

1. 项目中包含 .js 文件
2. 配置WKWebview
3. 启用 JavaScript
4. 在WKWebview中添加脚本

JS 文件中的函数如下：

function captureImage(bucket,fileName){
    window.webkit.messageHandlers.captureImage.postMessage("showCamera")
}

在 Swift 中访问此函数如下：

      webViewPWA.configuration.userContentController.add(self, name: "captureImage")


///This function handles the event generated by javascript
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
         print("Webview Message received: \(message.name) with body: \(message.body)")
        if (message.name == "captureImage"){
            print("\(message.body)")

            let body = message.body
            if let action:String = body as? String {
                switch action {
                case "showCamera":
                    print("camera image triggering, capture image for JS")
                    //take necessary action
                    break
                default:
                    break
                }
            }
        }
        return
    }

提前致谢！

Answer 1

一旦在设备上捕获图片，UIImagePickerControllerDelegate方法如下：

\n\n

func imagePickerController(_ picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [UIImagePickerController.InfoKey : Any]) {\n        imagePicker.dismiss(animated: true, completion: nil)\n        imageView.image = info[.originalImage] as? UIImage\n    }\n

\n\n

您可以通过使用在 WKWebView 中运行任何您想要的 JS，evaluateJavaScript()并在 Swift 中获得结果。

\n\n

webView.evaluateJavaScript("document.getElementById(\'someElement\').innerText") { (response, error) in\n    guard error == nil else {\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0print("evaluateJavaScript error -- \\(String(describing: error))")\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0return\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0print("evaluateJavaScript response -- \\(String(describing: response))")\n}\n

\n\n

如果有类似于 WebBridge.js 的东西也很好，它提供了与 iOS 中的构建 WKWebView 和 android webview 进行通信的功能

\n\n

在 WebBridge.js 内部您可以定义：

\n\n

/* install global handler for WebView to call methods */\n    if (!window.WebBridge) {\n      window.WebBridge = (function () {\n        var actions = []\n\n\n        return {\n          receive: function (actionName, json) {\n            if (typeof actions[actionName] !== \'undefined\') {\n              actions[actionName](json)\n            }\n          },\n          registerActionHandler: function (actionName, method) {\n            actions[actionName] = method\n          }\n        }\n      })()\n    }\n

\n\n

然后从 Swift 文件中，您可以缩小 JS 调用的结构范围：

\n\n

self.webView.evaluateJavaScript("WebBridge.receive(\'yourCustomActionName\', \'{\\"yourRey\\": \\"yourValue\\"}\')") { (response, error) in\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0guard error == nil else {\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0print("evaluateJavaScript error -- \\(String(describing: error))")\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0return\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0}\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0print("evaluateJavaScript response -- \\(String(describing: response))")\n\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0\xc2\xa0}\n

\n