Question

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

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

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

项目中包含的.js文件
配置的WKWebview
启用了JavaScript
在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方法在设备上捕获了图片，

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

您可以使用evaluateJavaScript()在WKWebView中运行所需的任何JS，并在Swift中获取结果。

webView.evaluateJavaScript("document.getElementById('someElement').innerText") { (response, error) in
    guard error == nil else {
          print("evaluateJavaScript error -- \(String(describing: error))")
          return
        }
        print("evaluateJavaScript response -- \(String(describing: response))")
}

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

在WebBridge.js中，您可以定义：

/* install global handler for WebView to call methods */
    if (!window.WebBridge) {
      window.WebBridge = (function () {
        var actions = []


        return {
          receive: function (actionName, json) {
            if (typeof actions[actionName] !== 'undefined') {
              actions[actionName](json)
            }
          },
          registerActionHandler: function (actionName, method) {
            actions[actionName] = method
          }
        }
      })()
    }

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

self.webView.evaluateJavaScript("WebBridge.receive('yourCustomActionName', '{\"yourRey\": \"yourValue\"}')") { (response, error) in
        guard error == nil else {
          print("evaluateJavaScript error -- \(String(describing: error))")
          return
        }
        print("evaluateJavaScript response -- \(String(describing: response))")
      }

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

1 个答案: