wkwebview调用js

WKWebView 是苹果在 iOS 8 及以后版本中引入的一个用于在应用内显示网页内容的组件。它是 WebKit 框架的一部分，提供了比旧的 UIWebView 更好的性能和更多的功能。WKWebView 调用 JavaScript 的能力是通过 JavaScriptCore 框架实现的，它允许 Objective-C 或 Swift 代码与网页中的 JavaScript 代码进行交互。

基础概念

WKWebView 调用 JavaScript 主要通过以下几个概念实现：

1. WKScriptMessageHandler：允许网页通过 window.webkit.messageHandlers.<name>.postMessage() 发送消息到原生应用。
2. WKUserContentController：用于注册脚本消息处理器，管理网页与原生应用之间的通信。
3. evaluateJavaScript(_:completionHandler:)：这是一个方法，允许原生代码执行网页中的 JavaScript 代码，并可选地接收执行结果。

优势

• 性能提升：WKWebView 相比 UIWebView 在渲染速度和内存占用上有显著提升。
• 稳定性增强：WKWebView 将网页渲染的部分工作交给了操作系统，减少了应用的崩溃率。
• 更好的用户体验：支持更多的 HTML5 特性和 CSS3 功能。
• 安全性：提供了更严格的安全沙箱环境，限制了网页对设备的访问权限。

类型

• 同步调用：原生代码调用 JavaScript 并等待结果。
• 异步调用：原生代码调用 JavaScript 并通过回调接收结果。

应用场景

• 混合应用开发：在原生应用中嵌入网页内容，并实现原生与网页的双向通信。
• 动态内容加载：根据用户操作动态执行 JavaScript 代码以更新网页内容。
• 表单自动填充：原生应用可以自动填充网页表单字段。

示例代码

以下是一个 Swift 示例，展示了如何在 WKWebView 中调用 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!) {
        // 调用 JavaScript 函数
        let jsString = "alert('Hello from Swift!')"
        webView.evaluateJavaScript(jsString, completionHandler: { (result, error) in
            if let error = error {
                print("Error executing JavaScript: \(error)")
            } else {
                print("JavaScript executed successfully")
            }
        })
    }
}

遇到问题及解决方法

问题：调用 JavaScript 时没有反应或者出现错误。

原因：

• JavaScript 代码本身有误。
• 网页尚未完全加载完成就调用了 JavaScript。
• 权限问题，例如跨域请求被阻止。

解决方法：

1. 确保 JavaScript 代码无误，并在浏览器的控制台中测试。
2. 确保在 webView(_:didFinish:) 或其他合适的生命周期方法中调用 JavaScript。
3. 检查网页的 CORS 设置，确保没有跨域问题。
4. 使用 Safari 的开发者工具连接到 WKWebView，检查控制台中的错误信息。

通过以上方法，可以有效地调用 JavaScript 并处理可能出现的问题。