js调用ios webview

JavaScript 调用 iOS WebView 主要涉及到在 iOS 应用中使用 WKWebView 组件来实现网页与原生应用之间的交互。以下是关于这个问题的基础概念、优势、类型、应用场景以及常见问题和解决方案的详细解答。

基础概念

WKWebView 是 iOS 8 及以上版本中用于显示网页内容的组件，它提供了比 UIWebView 更好的性能和更多的功能。通过 WKWebView，JavaScript 可以与原生代码进行双向通信。

优势

性能提升：WKWebView 比 UIWebView 更快，内存占用更少。
更好的用户体验：支持更多的网页标准和现代浏览器的特性。
安全性增强：提供了沙盒机制，限制网页对设备的访问权限。
灵活的交互方式：支持 JavaScript 与原生代码的双向通信。

类型

单向通信：原生代码调用 JavaScript 函数。
双向通信：JavaScript 调用原生代码，原生代码也可以调用 JavaScript。

应用场景

混合应用开发：在原生应用中嵌入网页内容，如新闻阅读器、电商应用等。
动态内容加载：根据用户操作动态加载不同的网页内容。
表单提交和处理：在网页中处理用户输入的数据，并将结果传递给原生应用。

示例代码

1. 原生代码调用 JavaScript

import WebKit

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

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

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let jsString = "alert('Hello from Swift!')"
        webView.evaluateJavaScript(jsString) { (result, error) in
            if let error = error {
                print("Error executing JavaScript: \(error)")
            }
        }
    }
}

2. JavaScript 调用原生代码

首先，在原生代码中定义一个协议并实现它：

import WebKit

@objc protocol JavaScriptHandler {
    func handleJavaScriptCall(_ message: String)
}

class ViewController: UIViewController, WKNavigationDelegate, JavaScriptHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let config = WKWebViewConfiguration()
        let userContentController = WKUserContentController()
        userContentController.add(self, name: "nativeHandler")
        config.userContentController = userContentController
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        if 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 == "nativeHandler", let messageBody = message.body as? String {
            handleJavaScriptCall(messageBody)
        }
    }

    func handleJavaScriptCall(_ message: String) {
        print("Received message from JavaScript: \(message)")
    }
}

然后在网页中使用 JavaScript 发送消息：

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript to Native</title>
    <script>
        function sendMessageToNative() {
            window.webkit.messageHandlers.nativeHandler.postMessage("Hello from JavaScript!");
        }
    </script>
</head>
<body>
    <button onclick="sendMessageToNative()">Send Message to Native</button>
</body>
</html>