iOS中如何在WKWebView实现数据库内HTML字符串间的链接

嘿，这个需求我之前做类似项目的时候碰到过，其实核心思路就是自定义URL Scheme + 拦截WebView跳转请求，这样就能在WKWebView里实现数据库中HTML字符串的互相跳转了，具体步骤如下：

1. 修改HTML中的链接，使用自定义URL Scheme #

首先给你的HTML链接设置一个独有的Scheme（比如myapp://），用来标识这是我们要内部处理的跳转，而不是跳转到外部网页。把你的HTML字符串改成这样：

let html1 = """
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- 用自定义scheme + 标识名来指向目标HTML -->
<a href="myapp://html2">Link to html2</a>
</body>
</html>
"""

let html2 = """
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<a href="myapp://html1">Link to html1</a>
</body>
</html>
"""

这里的html2和html1就是你在数据库中用来区分不同HTML字符串的标识（可以是ID、唯一名称等）。

2. 设置WKWebView的NavigationDelegate，拦截跳转请求 #

接下来要让WKWebView监听跳转请求，当检测到我们自定义的Scheme时，就从数据库取出对应的HTML字符串加载，而不是执行默认的跳转行为。完整的代码示例如下：

import UIKit
import WebKit

class HTMLViewController: UIViewController, WKNavigationDelegate {
    private var webView: WKWebView!
    
    // 模拟数据库中的HTML存储，实际替换成你的数据库查询逻辑
    private let htmlDatabase: [String: String] = [
        "html1": html1,
        "html2": html2
    ]

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化WKWebView
        let webConfig = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: webConfig)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        // 初始加载html1，baseURL设置为自定义scheme，避免WebView处理路径混乱
        webView.loadHTMLString(html1, baseURL: URL(string: "myapp://"))
    }
    
    // 拦截跳转请求的核心方法
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        guard let requestURL = navigationAction.request.url else {
            decisionHandler(.allow)
            return
        }
        
        // 判断是否是我们自定义的Scheme
        if requestURL.scheme == "myapp" {
            // 从URL的host部分获取目标HTML的标识
            guard let targetHTMLKey = requestURL.host else {
                decisionHandler(.cancel)
                return
            }
            
            // 从数据库取出对应的HTML字符串并加载
            if let targetHTML = htmlDatabase[targetHTMLKey] {
                webView.loadHTMLString(targetHTML, baseURL: URL(string: "myapp://"))
            }
            
            // 取消默认跳转行为，因为我们已经手动加载了目标HTML
            decisionHandler(.cancel)
            return
        }
        
        // 非自定义Scheme的链接（比如http/https），允许正常跳转（会打开Safari）
        decisionHandler(.allow)
    }
}

3. 关键细节说明 #

• 自定义Scheme命名：可以随便取，只要不与系统已有的Scheme（比如http、https、mailto）冲突就行，比如myhtml://、appcontent://都可以。
• 数据库查询逻辑：示例中用字典模拟了数据库，实际开发中你需要替换成自己的数据库查询代码（比如Core Data、Realm或者SQLite的查询逻辑），根据targetHTMLKey去数据库中取出对应的HTML字符串。
• BaseURL的作用：设置baseURL为自定义Scheme的URL，可以避免WebView对HTML中的相对路径（如果有的话）产生错误解析，即使你的HTML没有外部资源，设置这个也能让WebView的行为更稳定。

内容的提问来源于stack exchange，提问作者Tyler Kelly