wkwebview怎么传值给js

WKWebView传值给JS的方法有多种，包括evaluateJavaScript、使用URL Scheme、通过WebKit消息处理机制等。其中，最常用和推荐的方法是使用evaluateJavaScript，因为它简单且易于实现。接下来，我们将详细讲解这几种方法。

一、使用evaluateJavaScript方法传值

简介

evaluateJavaScript方法是最直接、最常用的方式。它允许你在Swift代码中直接执行JavaScript代码，并且可以处理执行结果。

实现步骤

1. 初始化WKWebView

首先，需要初始化一个WKWebView实例，并加载一个网页。

import WebKit

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

2. 传值给JavaScript

在某个事件中，例如按钮点击时，可以使用evaluateJavaScript方法将值传递给JavaScript。

@IBAction func buttonClicked(_ sender: UIButton) {

    let valueToSend = "Hello, JavaScript!"
    let jsCode = "receiveValueFromSwift('(valueToSend)')"
    webView.evaluateJavaScript(jsCode) { (result, error) in
        if let error = error {
            print("Error: (error.localizedDescription)")
        } else {
            print("JavaScript executed successfully")
        }
    }
}

3. JavaScript端接收

在网页的JavaScript代码中，需要定义一个函数来接收这个值。

function receiveValueFromSwift(value) {

    console.log("Value received from Swift: " + value);
}

优点

• 简单易用：不需要额外的配置和复杂的代码。
• 实时性强：可以立即执行JavaScript代码并获得结果。

缺点

• 安全性：需要确保传递的JavaScript代码是安全的，防止XSS攻击。
• 性能：对于大量数据传输，性能可能不如其他方法。

二、使用URL Scheme传值

简介

通过URL Scheme传值的方法适用于数据量较小且需要通过URL进行传递的场景。

实现步骤

1. 配置URL Scheme

在Swift代码中，使用URL Scheme将值传递给JavaScript。

@IBAction func buttonClicked(_ sender: UIButton) {

    let valueToSend = "Hello, JavaScript!"
    let jsCode = "window.location.href = 'myscheme://(valueToSend)'"
    webView.evaluateJavaScript(jsCode, completionHandler: nil)
}

2. 拦截URL请求

在WebView的委托方法中拦截URL请求并处理数据。

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {

    if let url = navigationAction.request.url, url.scheme == "myscheme" {
        let value = url.host
        print("Value received from Swift: (value ?? "")")
        decisionHandler(.cancel)
    } else {
        decisionHandler(.allow)
    }
}

优点

• 适用特定场景：适用于需要通过URL传递数据的场景。

缺点

• 复杂性：需要额外的配置和代码来拦截和处理URL请求。
• 数据量限制：不适用于大数据量的传输。

三、使用WebKit消息处理机制

简介

通过WebKit提供的消息处理机制，可以实现双向通信，即Swift与JavaScript可以互相传递数据。

实现步骤

1. 配置WebView

在初始化WKWebView时，配置消息处理机制。

let contentController = WKUserContentController()

contentController.add(self, name: "messageHandler")
let config = WKWebViewConfiguration()
config.userContentController = contentController
let webView = WKWebView(frame: .zero, configuration: config)

2. 传值给JavaScript

在Swift代码中，通过postMessage方法传递数据。

@IBAction func buttonClicked(_ sender: UIButton) {

    let valueToSend = "Hello, JavaScript!"
    let jsCode = "window.webkit.messageHandlers.messageHandler.postMessage('(valueToSend)')"
    webView.evaluateJavaScript(jsCode, completionHandler: nil)
}

3. JavaScript端接收

在网页的JavaScript代码中，接收并处理传递的数据。

window.webkit.messageHandlers.messageHandler.postMessage = function(message) {

    console.log("Value received from Swift: " + message);
}

优点

• 双向通信：支持双向数据传输，灵活性强。
• 安全性：通过消息处理机制，安全性更高。

缺点

• 复杂性：需要配置和实现消息处理机制，代码复杂度较高。

四、总结

在不同的场景下，可以选择不同的方法来实现WKWebView与JavaScript之间的通信。evaluateJavaScript方法最为简单和常用，适用于大多数场景；URL Scheme适用于特定的URL传递场景；而WebKit消息处理机制则提供了更高的灵活性和安全性，适用于需要双向通信的复杂场景。

不论选择哪种方法，都需要注意安全性和性能问题，确保数据传输的安全和高效。在实际开发中，可以根据具体需求选择最适合的方法来实现WKWebView与JavaScript之间的通信。

相关问答FAQs：

1. 如何在WKWebView中传递值给JavaScript？

WKWebView提供了一种简单的方法来将值传递给JavaScript。您可以使用evaluateJavaScript方法来执行JavaScript代码，并将所需的值作为参数传递给它。以下是一个示例：

let webView = WKWebView()
let myValue = "Hello, JavaScript!"

let script = "myFunction('(myValue)');"

webView.evaluateJavaScript(script, completionHandler: nil)

在上述示例中，我们将一个字符串值传递给名为myFunction的JavaScript函数。您可以根据您的需求修改脚本，并将不同类型的值传递给JavaScript。

2. 如何将iOS中的数据传递给WKWebView中的JavaScript函数？

要将iOS中的数据传递给WKWebView中的JavaScript函数，您可以使用WKScriptMessageHandler协议。首先，您需要设置一个WKUserContentController对象，并将其添加到WKWebView的配置中。然后，通过实现WKScriptMessageHandler协议中的方法来处理从JavaScript发送的消息并进行相应的处理。以下是一个示例：

class MessageHandler: NSObject, WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if let myValue = message.body as? String {
            print("Received value from JavaScript: (myValue)")
        }
    }
}

let configuration = WKWebViewConfiguration()
let userContentController = WKUserContentController()
let messageHandler = MessageHandler()

userContentController.add(messageHandler, name: "myMessageHandler")
configuration.userContentController = userContentController

let webView = WKWebView(frame: .zero, configuration: configuration)

在上述示例中，我们创建了一个名为MessageHandler的自定义类，并将其添加为WKUserContentController的消息处理程序。通过在JavaScript中使用window.webkit.messageHandlers.myMessageHandler.postMessage来发送消息，您可以将数据传递给iOS并在MessageHandler类中进行处理。

3. 在WKWebView中，如何通过JavaScript获取iOS传递的值？

通过JavaScript获取WKWebView中传递的值非常简单。您可以使用JavaScript的window.webkit.messageHandlers对象来调用指定的消息处理程序，并通过postMessage方法将所需的值传递给它。以下是一个示例：

// JavaScript code
function getValueFromiOS() {
    window.webkit.messageHandlers.myMessageHandler.postMessage('Hello, iOS!');
}

// Call the JavaScript function
getValueFromiOS();

在上述示例中，我们定义了一个名为getValueFromiOS的JavaScript函数，它通过调用window.webkit.messageHandlers.myMessageHandler.postMessage方法将字符串值'Hello, iOS!'传递给iOS。您可以根据需要修改JavaScript代码，并将不同类型的值传递给iOS。然后，您可以在iOS中的消息处理程序中处理接收到的值。