iOS Swift中如何从WebView获取HTML表单的值

嘿，这个问题其实很常见，核心思路就是通过原生代码调用JavaScript来读取WebView里表单的输入值，下面我给你分两种常用WebView类型来讲解实现方式：

一、推荐方案：使用WKWebView（苹果官方推荐，性能更优） #

首先确保你的ViewController里用的是WKWebView（UIWebView已经被废弃，不建议再使用），完整代码示例如下：

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    // 声明WKWebView实例
    var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 初始化WKWebView并添加到视图
        let webConfig = WKWebViewConfiguration()
        webView = WKWebView(frame: view.bounds, configuration: webConfig)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        // 加载目标HTML页面
        guard let targetURL = URL(string: "https://tympanus.net/Tutorials/LoginRegistrationForm/") else { return }
        webView.load(URLRequest(url: targetURL))
    }
    
    // 页面加载完成的回调，可用来控制按钮可用性（避免未加载完就点击）
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 比如这里可以把getData按钮设为可用
        // yourGetDataButton.isEnabled = true
    }
    
    @IBAction func getData(_ sender: Any) {
        // 编写JavaScript脚本，根据目标HTML的DOM结构获取输入值
        // 注意：要和页面里的表单元素选择器对应，这里示例针对你提供的登录页面
        let fetchFormJS = """
            // 定位登录表单的用户名和密码输入框
            const usernameInput = document.querySelector('#loginForm input[name="username"]');
            const passwordInput = document.querySelector('#loginForm input[name="password"]');
            
            // 构造包含输入值的对象并转为JSON字符串（方便原生解析）
            JSON.stringify({
                username: usernameInput ? usernameInput.value : '',
                password: passwordInput ? passwordInput.value : ''
            });
        """
        
        // 执行JavaScript并处理返回结果
        webView.evaluateJavaScript(fetchFormJS) { [weak self] result, error in
            guard let self = self else { return }
            
            if let error = error {
                print("获取表单数据失败：\(error.localizedDescription)")
                return
            }
            
            // 解析JS返回的JSON数据
            if let jsonStr = result as? String,
               let jsonData = jsonStr.data(using: .utf8),
               let formData = try? JSONSerialization.jsonObject(with: jsonData) as? [String: String] {
                
                // 这里就是你要的表单输入值了
                print("用户名：\(formData["username"] ?? "未输入")")
                print("密码：\(formData["password"] ?? "未输入")")
                
                // 后续可以把这些数据存本地、提交服务器等
            }
        }
    }
}

二、兼容方案：使用UIWebView（不推荐，仅作兼容参考） #

如果你的项目还在使用UIWebView，也可以用下面的方式实现：

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var webView: UIWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        guard let targetURL = URL(string: "https://tympanus.net/Tutorials/LoginRegistrationForm/") else { return }
        webView.loadRequest(URLRequest(url: targetURL))
    }
    
    @IBAction func getData(_ sender: Any) {
        let fetchFormJS = """
            const username = document.querySelector('#loginForm input[name="username"]').value || '';
            const password = document.querySelector('#loginForm input[name="password"]').value || '';
            JSON.stringify({username: username, password: password});
        """
        
        // 执行JS并获取结果
        if let jsonStr = webView.stringByEvaluatingJavaScript(from: fetchFormJS) {
            if let jsonData = jsonStr.data(using: .utf8),
               let formData = try? JSONSerialization.jsonObject(with: jsonData) as? [String: String] {
                
                print("用户名：\(formData["username"] ?? "未输入")")
                print("密码：\(formData["password"] ?? "未输入")")
            }
        }
    }
}

关键注意事项 #

• DOM选择器要准确：你需要根据目标HTML页面的实际结构调整document.querySelector里的选择器，比如如果表单id不是loginForm，或者输入框的name属性不同，都要对应修改。
• 确保页面加载完成：可以通过WebView的导航代理回调（比如WKWebView的didFinish）来确认页面加载完成，再允许用户点击getData按钮，避免因元素未渲染导致获取失败。
• 动态内容处理：如果页面是通过JavaScript动态生成的表单，要确保执行JS脚本时目标元素已经存在，必要时可以延迟执行或者监听页面的DOM加载事件。

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