iOS开发：如何在UITabBarController多标签页复用单个WKWebView

1. 封装全局共享WKWebView实例 #

创建单例类管理唯一的WKWebView实例，确保全App复用同一个WebView对象：

class WebViewManager {
    static let shared = WebViewManager()
    let webView: WKWebView = {
        let config = WKWebViewConfiguration()
        // 按需配置WebView参数（如JS脚本、缓存策略等）
        return WKWebView(frame: .zero, configuration: config)
    }()
    
    private init() {} // 私有初始化保证单例唯一性
}

2. 改造标签页ViewController #

所有标签页的ViewController不再持有独立WebView，而是在页面显示时将共享WebView添加到自身视图中：

class BaseTabViewController: UIViewController {
    var targetURL: URL?
    private var savedScrollOffset: CGPoint? // 保存页面滚动位置
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        // 将共享WebView从原父视图移除，添加到当前VC视图
        let sharedWebView = WebViewManager.shared.webView
        sharedWebView.removeFromSuperview()
        sharedWebView.frame = view.bounds
        sharedWebView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.addSubview(sharedWebView)
        
        // 加载目标URL（仅当当前URL不匹配时触发）
        if let url = targetURL, sharedWebView.url != url {
            sharedWebView.load(URLRequest(url: url))
        }
        
        // 恢复之前保存的滚动位置
        if let offset = savedScrollOffset {
            sharedWebView.scrollView.setContentOffset(offset, animated: false)
        }
    }
    
    override func viewWillDisappear(_ animated: Bool) {
        super.viewWillDisappear(animated)
        // 保存当前WebView的滚动位置
        savedScrollOffset = WebViewManager.shared.webView.scrollView.contentOffset
    }
}

// 第一个标签页VC示例
class FirstTabViewController: BaseTabViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        targetURL = URL(string: "https://first-tab-url.com")
        
        // 监听WebView操作事件（示例：通过JS交互触发切换）
        let userScript = WKUserScript(source: """
            // 假设页面中某个操作触发此JS事件
            document.querySelector('#action-btn').addEventListener('click', () => {
                window.webkit.messageHandlers.switchTab.postMessage('second');
            });
        """, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
        WebViewManager.shared.webView.configuration.userContentController.addUserScript(userScript)
        WebViewManager.shared.webView.configuration.userContentController.add(self, name: "switchTab")
    }
}

3. 实现跨标签页切换与URL更新 #

在第一个标签页VC中监听操作事件，触发标签切换并更新目标URL：

extension FirstTabViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "switchTab", message.body as? String == "second" else { return }
        
        // 切换到第二个标签页（索引为1）
        guard let tabBarVC = tabBarController as? MainTabBarViewController else { return }
        tabBarVC.selectedIndex = 1
        
        // 更新第二个标签页的URL并加载
        if let secondVC = tabBarVC.viewControllers?[1] as? BaseTabViewController {
            let updatedURL = URL(string: "https://second-tab-updated-url.com")!
            secondVC.targetURL = updatedURL
            WebViewManager.shared.webView.load(URLRequest(url: updatedURL))
        }
    }
}

关键注意事项 #

• 内存管理：在VC销毁时需移除WKScriptMessageHandler代理，避免内存泄漏
• 状态隔离：复用WebView会共享Cookie、缓存和页面状态，若需标签页独立状态，需额外通过WKProcessPool配置隔离
• 生命周期适配：在App前后台切换时，调用webView.stopLoading()和webView.reload()处理WebView状态

内容的提问来源于stack exchange，提问作者Sudha Tiwari