Swift JS交互处理H5页面问题？

在Swift中，如果你想与H5页面（即Web页面，通常指HTML5页面）进行交互，通常会使用WKWebView或UIWebView（尽管UIWebView在iOS 12及以后的版本中被弃用，推荐使用WKWebView）。

下面是一些使用WKWebView进行Swift与H5页面交互的基本步骤：

1. 创建WKWebView

首先，你需要在你的Swift项目中创建一个WKWebView实例。

import WebKit

let webView = WKWebView(frame: .zero)
view.addSubview(webView)
webView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
    webView.topAnchor.constraint(equalTo: view.topAnchor),
    webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
    webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
    webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
])

2. 加载H5页面

使用WKWebView的load方法来加载一个H5页面。

let url = URL(string: "https://example.com")!
let request = URLRequest(url: url)
webView.load(request)

3. Swift调用H5页面的JavaScript

你可以使用WKWebView的evaluateJavaScript方法来执行H5页面中的JavaScript代码。

webView.evaluateJavaScript("alert('Hello from Swift!')") { (result, error) in
    if let error = error {
        print("Error: \(error)")
    } else {
        print("Result: \(result ?? "nil")")
    }
}

4. H5页面调用Swift方法

为了让H5页面能够调用Swift方法，你需要设置一个WKScriptMessageHandler。首先，你需要定义一个遵守WKScriptMessageHandler协议的对象，并实现userContentController(_:didReceive:)方法。然后，将这个对象设置为WKWebViewConfiguration的userContentController的消息处理器。

class WebViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let contentController = WKUserContentController()
        contentController.add(self, name: "swiftHandler")
        
        let config = WKWebViewConfiguration()
        config.userContentController = contentController
        
        webView = WKWebView(frame: .zero, configuration: config)
        view.addSubview(webView)
        webView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            webView.topAnchor.constraint(equalTo: view.topAnchor),
            webView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            webView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
        let url = URL(string: "https://example.com")!
        let request = URLRequest(url: url)
        webView.load(request)
    }
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "swiftHandler" {
            print("Received message from H5: \(message.body)")
            // 在这里处理消息，并可以调用其他Swift方法或更新UI等。
        }
    }
}

在H5页面中，你可以使用webkit.messageHandlers.swiftHandler.postMessage来发送消息给Swift。

<script>
    function sendMessageToSwift() {
        webkit.messageHandlers.swiftHandler.postMessage('Hello from H5!');
    }
</script>
<button onclick="sendMessageToSwift()">Send Message to Swift</button>

这样，当H5页面中的按钮被点击时，它会发送一个消息给Swift，Swift中的userContentController(_:didReceive:)方法会被调用，并可以处理这个消息。