Swift 中的 UIWebView 和 JavaScriptInterface

Swift

使用 Swift 中的 UIWebView 和 JavaScriptInterface 实现网页和原生代码的交互

在开发移动应用程序时，有时我们需要在应用中加载网页并与之进行交互。在 Swift 中，我们可以使用 UIWebView 来实现这一功能。UIWebView 是一个可以加载网页内容并显示在应用中的视图组件。同时，我们还可以通过 JavaScriptInterface 在网页中调用原生代码，实现双向通信。

加载网页

首先，我们需要创建一个 UIWebView 实例并将其添加到应用的视图层级中。然后，我们可以使用 loadRequest 方法来加载指定的网页。下面是一个简单的示例代码：

Swift
import UIKit
class ViewController: UIViewController, UIWebViewDelegate {
    var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        webView = UIWebView(frame: view.bounds)
        webView.delegate = self
        view.addSubview(webView)
        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.loadRequest(request)
        }
    }
    // 实现 UIWebViewDelegate 的相关方法
    // ...
}

与网页进行交互

在网页中调用原生代码，我们可以使用 JavaScriptInterface。首先，我们需要在原生代码中定义一个与 JavaScript 交互的接口。然后，在网页中使用 JavaScript 调用该接口。

下面是一个简单的示例代码，展示了如何使用 JavaScriptInterface 在网页中调用原生代码：

Swift
import UIKit
import JavaScriptCore
class ViewController: UIViewController, UIWebViewDelegate {
    var webView: UIWebView!
    override func viewDidLoad() {
        super.viewDidLoad()
        webView = UIWebView(frame: view.bounds)
        webView.delegate = self
        view.addSubview(webView)
        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.loadRequest(request)
        }
    }
    // 实现 UIWebViewDelegate 的相关方法
    // ...
    // 定义与 JavaScript 交互的接口
    @objc protocol JavaScriptInterface: JSExport {
        func showMessage(_ message: String)
    }
    // 实现接口方法
    @objc class JavaScriptInterfaceImpl: NSObject, JavaScriptInterface {
        func showMessage(_ message: String) {
            print("Received message from JavaScript: \(message)")
        }
    }
    // 注册 JavaScriptInterface
    func enableJavaScriptInterface() {
        let context = webView.value(forKeyPath: "documentView.webView.mAInFrame.JavaScriptContext") as? JSContext
        let interface = JavaScriptInterfaceImpl()
        context?.setObject(interface, forKeyedSubscript: "NativeInterface" as (NSCopying & NSObjectProtocol))
    }
    // 在网页中调用原生代码
    func callNativeCodeFromJavaScript() {
        webView.stringByEvaluatingJavaScript(from: "NativeInterface.showMessage('Hello from JavaScript!')")
    }
}

中间段落

下面是一个使用 Swift 中的 UIWebView 和 JavaScriptInterface 实现网页和原生代码的交互的示例：

1. 加载网页：

我们首先创建一个 UIWebView 实例，并将其添加到应用的视图层级中。然后，使用 loadRequest 方法加载指定的网页。这样，我们就可以在应用中显示网页的内容了。

2. 与网页进行交互：

为了在网页中调用原生代码，我们需要定义一个与 JavaScript 交互的接口。通过实现接口方法，我们可以在网页中调用原生代码并进行双向通信。在示例代码中，我们定义了一个名为 JavaScriptInterface 的接口，并实现了 showMessage 方法。在网页中，我们可以通过 JavaScript 调用 NativeInterface.showMessage 方法来向原生代码发送消息。

使用 Swift 中的 UIWebView 和 JavaScriptInterface 可以很方便地实现网页和原生代码的交互。通过加载网页和定义 JavaScriptInterface，我们可以在应用中显示网页内容并与之进行交互。这为开发者提供了更多的可能性，使移动应用程序更加丰富和灵活。