wkwebview传值到js

WKWebView 是苹果提供的用于在 iOS 应用中嵌入网页内容的组件，它允许原生应用与网页之间进行交互。将值从原生应用传递到 JavaScript 可以通过多种方式实现，以下是一些基础概念和相关方法：

基础概念

WKScriptMessageHandler: 这是一个协议，允许原生应用接收来自网页的消息。
WKUserContentController: 用于注册消息处理程序和管理脚本消息。
WKWebViewConfiguration: 配置 WKWebView 的设置，包括用户内容控制器。

优势

性能: WKWebView 比 UIWebView 更快，内存占用更低。
安全性: 提供更好的沙盒环境，减少安全风险。
灵活性: 支持与 JavaScript 的双向通信，便于实现复杂的交互逻辑。

类型与应用场景

类型: 主要通过 evaluateJavaScript(_:completionHandler:) 方法执行 JavaScript 代码。
应用场景:
- 在电商应用中，将商品详情从原生传递到网页显示。
- 在社交应用中，将用户信息传递给网页进行个性化展示。

实现方法

以下是一个简单的示例，展示如何从 Swift 原生代码向 JavaScript 传递数据：

Swift 代码

import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        userContentController.add(self, name: "nativeBridge")
        config.userContentController = userContentController
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)
        
        if let url = URL(string: "https://example.com/page.html") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "nativeBridge", let body = message.body as? [String: Any], let data = body["data"] as? String {
            // 处理从网页发送过来的消息
            print("Received data from JS: \(data)")
            
            // 将数据传递回 JavaScript
            let jsString = "receiveNativeData('\(data)')"
            webView.evaluateJavaScript(jsString, completionHandler: nil)
        }
    }

    func sendDataToJS() {
        let data = "Hello from Swift!"
        let jsString = "receiveNativeData('\(data)')"
        webView.evaluateJavaScript(jsString, completionHandler: nil)
    }
}

HTML 和 JavaScript 代码

<!DOCTYPE html>
<html>
<head>
    <title>WKWebView Example</title>
    <script>
        function receiveNativeData(data) {
            console.log("Received data from Swift: " + data);
            document.getElementById('dataDisplay').innerText = data;
        }
    </script>
</head>
<body>
    <h1>Data from Swift:</h1>
    <p id="dataDisplay"></p>
</body>
</html>

可能遇到的问题及解决方法

安全性问题: 直接拼接字符串可能导致 XSS 攻击。使用 evaluateJavaScript(_:completionHandler:) 方法可以避免这个问题。
异步问题: JavaScript 回调可能在原生代码执行完毕后才触发。确保处理好异步逻辑。
性能问题: 频繁调用 JavaScript 可能影响性能。尽量减少不必要的调用。