iOS WebView注入JS无法填充工单文本框问题求助

1. 确认目标元素的真实DOM结构 #

很多帮助中心网站用现代前端框架（React/Vue）封装输入组件，表面的输入框可能是嵌套容器，真实的<input>/<textarea>可能藏在内部，或者带有特定name/data-*属性。

• 用Safari调试WebView：连接设备后，在Safari「开发」菜单找到你的App的WebView，直接在控制台执行document.querySelector('你的选择器')，检查返回的元素是否是真正的输入控件。
• 改用更精确的选择器，比如结合name属性：document.querySelector('textarea[name="ticket_body"]')

2. 修改值后必须触发前端框架监听的事件 #

现代框架不会直接监听DOM的value变化，而是依赖状态管理，所以修改value后需要手动触发对应事件：

// 示例：填充工单内容
const ticketInput = document.querySelector('textarea[name="ticket_body"]');
if (ticketInput) {
  // 设置内容
  ticketInput.value = `App版本：${appVersion}\n邮箱：${userEmail}`;
  // 触发input事件（适配大多数框架）
  ticketInput.dispatchEvent(new Event('input', { bubbles: true }));
  // 若无效，尝试触发change事件
  ticketInput.dispatchEvent(new Event('change', { bubbles: true }));
}

3. 修正Placeholder的修改方式 #

如果修改placeholder无效：

• 先确认元素原生支持placeholder属性，若页面用伪元素（::placeholder）或自定义DOM模拟占位符，需找到对应的元素或修改CSS。
• 原生输入框直接修改属性即可：

ticketInput.placeholder = `请描述问题（自动填充：App版本${appVersion}）`;

4. 确保JS注入时机正确 #

UIKit的WKWebView中，必须在页面完全加载后注入JS：

• 在WKNavigationDelegate的webView(_:didFinish:)方法中调用evaluateJavaScript(_:completionHandler:)，避免DOM未渲染完成时执行。
• 若页面是单页应用（SPA），路由切换后需重新注入，可通过监听didFinish或在JS中监听页面路由变化。

5. 处理动态生成的元素 #

若输入框是异步加载的（比如接口返回后渲染），需等待元素出现后再执行逻辑：

function waitForElement(selector, callback) {
  const element = document.querySelector(selector);
  if (element) {
    callback(element);
  } else {
    requestAnimationFrame(() => waitForElement(selector, callback));
  }
}

// 使用：等待工单输入框出现后填充
waitForElement('textarea[name="ticket_body"]', (el) => {
  el.value = `App版本：1.0.0\n邮箱：user@example.com`;
  el.dispatchEvent(new Event('input', { bubbles: true }));
});

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