如何在Swift中监听本地HTML文件内按钮的点击事件？

嘿，我来帮你解决这个问题！你遇到的问题主要是因为混用了UIWebView和WKWebView的API——这俩是完全不同的组件，WKWebView是苹果后来推出的更高效的替代方案，没有UIWebView里的那些旧方法，所以才会出现编译错误。下面给你两种靠谱的解决方案，都是适配WKWebView的：

方法一：使用WKScriptMessageHandler（推荐，更现代的方式） #

这种方法是通过JS和Swift直接通信，是WKWebView官方推荐的交互方式，步骤很清晰：

• 让你的ViewController遵守WKScriptMessageHandler协议
  打开你的Swift文件，在ViewController的类声明里加上协议，然后实现协议要求的方法：

  import UIKit
  import WebKit
  
  class ViewController: UIViewController, WKScriptMessageHandler {
      
      var webView: WKWebView!
      
      override func viewDidLoad() {
          super.viewDidLoad()
          // 初始化WKWebView配置
          let config = WKWebViewConfiguration()
          // 添加消息处理器，指定一个唯一的名字（比如"ageCalculate"），这个名字要和JS里对应上
          config.userContentController.add(self, name: "ageCalculate")
          
          // 创建WKWebView并添加到视图
          webView = WKWebView(frame: view.bounds, configuration: config)
          view.addSubview(webView)
          
          // 加载本地HTML文件
          if let htmlPath = Bundle.main.path(forResource: "你的HTML文件名", ofType: "html") {
              let htmlURL = URL(fileURLWithPath: htmlPath)
              webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())
          }
      }
      
      // 实现WKScriptMessageHandler的方法，接收来自JS的消息
      func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
          // 判断消息名字是不是我们指定的"ageCalculate"
          if message.name == "ageCalculate" {
              print("按钮点击啦！在这里处理你的逻辑")
              // 你可以在这里获取JS传递过来的参数，比如message.body
              if let formData = message.body as? [String: Any] {
                  print("收到表单数据：\(formData)")
              }
          }
      }
      
      // 记得在页面销毁时移除消息处理器，避免内存泄漏
      deinit {
          webView.configuration.userContentController.removeScriptMessageHandler(forName: "ageCalculate")
      }
  }
  

• 修改HTML里的ageCalculate函数
  让JS函数调用WKWebView提供的消息接口，把事件传递给Swift：

  <script>
      function ageCalculate() {
          // 这里可以先获取表单里的数据，比如输入框的值
          let inputAge = document.getElementById("你的输入框ID").value;
          // 发送消息给Swift，可以附带数据
          window.webkit.messageHandlers.ageCalculate.postMessage({age: inputAge});
      }
  </script>
  

方法二：拦截自定义URL请求（适合简单场景） #

如果你的需求很简单，也可以让JS跳转到一个自定义的URL，然后在Swift里拦截这个请求：

• 修改HTML的ageCalculate函数
  让函数跳转到自定义的URL，比如myapp://calculate：

  <script>
      function ageCalculate() {
          window.location.href = "myapp://calculate";
      }
  </script>
  

• 在Swift里拦截这个URL
  让ViewController遵守WKNavigationDelegate，实现拦截方法：

  import UIKit
  import WebKit
  
  class ViewController: UIViewController, WKNavigationDelegate {
      
      var webView: WKWebView!
      
      override func viewDidLoad() {
          super.viewDidLoad()
          
          webView = WKWebView(frame: view.bounds)
          webView.navigationDelegate = self
          view.addSubview(webView)
          
          // 加载本地HTML文件，同方法一
          if let htmlPath = Bundle.main.path(forResource: "你的HTML文件名", ofType: "html") {
              let htmlURL = URL(fileURLWithPath: htmlPath)
              webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())
          }
      }
      
      // 拦截URL请求
      func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
          if let url = navigationAction.request.url, url.scheme == "myapp" {
              if url.host == "calculate" {
                  print("按钮点击啦！在这里处理逻辑")
                  // 不要让WebView跳转这个URL，否则会显示错误页面
                  decisionHandler(.cancel)
                  return
              }
          }
          // 其他正常请求允许跳转
          decisionHandler(.allow)
      }
  }
  

最后提醒一下：记得把代码里的你的HTML文件名换成你实际的文件名，还有输入框ID也要对应上哦。

备注：内容来源于stack exchange，提问作者noorapps