iOS WebView中如何调用JS函数并获取draft函数内ios.fullcode的值？

我来帮你梳理下解决这个问题的关键步骤和常见坑点，毕竟我也遇到过类似的场景😉

核心前提：确保用对WebView组件 #

首先，现在iOS开发里UIWebView已经被废弃了，强烈建议你用WKWebView——它对JS的支持更完善，性能也更好。下面的方案都是基于WKWebView来展开的。

步骤1：确保本地HTML正确加载 #

先确认你的本地HTML文件已经被正确加到项目里（勾选了对应的target），然后用正确的方式加载：

import UIKit
import WebKit

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

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化WKWebView并设置代理
        let config = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)

        // 加载本地HTML文件
        guard let htmlPath = Bundle.main.path(forResource: "你的本地文件名", ofType: "html") else {
            print("本地HTML文件找不到！")
            return
        }
        let htmlURL = URL(fileURLWithPath: htmlPath)
        // 这里要允许WebView读取文件所在目录的资源（比如关联的CSS/JS）
        webView.loadFileURL(htmlURL, allowingReadAccessTo: htmlURL.deletingLastPathComponent())
    }
}

步骤2：修改JS函数，让它返回需要的值 #

你的draft函数里有ios.fullcode，但如果函数本身没有返回这个值，iOS端是拿不到的。所以先修改HTML里的JS代码：

function draft() {
    // 你原来的逻辑：收集文本框、单选按钮内容，生成HTML
    const ios = {
        fullcode: document.documentElement.outerHTML // 假设这是你生成的HTML内容
    };
    // 关键：把fullcode作为返回值抛出去
    return ios.fullcode;
}

步骤3：在WebView加载完成后调用JS函数 #

必须等HTML完全加载完成再调用JS，不然会出现“函数未定义”的错误。我们用WKNavigationDelegate的回调来触发：

// 实现WKNavigationDelegate的页面加载完成回调
func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
    // 调用draft函数并获取返回值
    webView.evaluateJavaScript("draft()") { [weak self] result, error in
        guard let self = self else { return }
        
        if let error = error {
            print("调用JS失败：\(error.localizedDescription)")
            return
        }
        
        // 拿到你需要的ios.fullcode值
        if let fullHTML = result as? String {
            print("成功获取到HTML内容：\(fullHTML)")
            // 这里可以做你需要的操作，比如保存到本地、上传等
        }
    }
}

可选：在用户操作时触发调用（比如按钮点击） #

如果不是页面加载完成就需要生成HTML，而是用户点击App里的按钮才触发，可以这么做：

// 在ViewController里添加一个按钮
override func viewDidLoad() {
    super.viewDidLoad()
    // ... 之前的WebView初始化代码
    
    let generateBtn = UIButton(type: .system)
    generateBtn.setTitle("生成HTML", for: .normal)
    generateBtn.addTarget(self, action: #selector(generateHTMLAction), for: .touchUpInside)
    generateBtn.frame = CGRect(x: 20, y: view.safeAreaInsets.top + 20, width: view.bounds.width - 40, height: 44)
    view.addSubview(generateBtn)
}

@objc func generateHTMLAction() {
    // 同样调用draft函数
    webView.evaluateJavaScript("draft()") { result, error in
        if let error = error {
            print("调用失败：\(error)")
            return
        }
        if let fullCode = result as? String {
            // 处理你的HTML内容
            print(fullCode)
        }
    }
}

常见问题排查 #

1. JS函数调用报错“undefined”：
   • 检查函数名拼写是否完全一致（JS大小写敏感）
   • 确认HTML已经加载完成（不要在viewDidLoad里直接调用，必须等didFinish回调）
2. 返回值为nil：
   • 检查JS函数是否正确返回了ios.fullcode
   • 用Safari的Web Inspector调试：连接你的iOS设备，打开Safari开发菜单，找到你的App的WebView，在控制台手动调用draft()看看返回什么
3. 本地HTML加载失败：
   • 确认文件已经加到项目中，并且勾选了对应target
   • 检查allowingReadAccessTo参数是否设置为HTML文件所在的目录

内容的提问来源于stack exchange，提问作者Faizul Karim