提交按钮触发DOM刷新及页面跳转后如何获取目标元素innerText

问题根因 #

你点击提交后触发了整页跳转，浏览器加载新页面时会完全销毁原有页面的JS运行上下文，你之前在控制台注入的所有代码、排队的延时任务都会被清空，这不是点击触发方式或者等待逻辑的问题，是代码运行的环境直接被销毁了。

可行解决方案 #

方案1：阻止整页跳转，直接用Fetch提交表单（最方便，不需要额外工具） #

不用模拟点击提交按钮，直接读取表单数据发起请求，页面不会刷新，原有JS上下文完全保留，直接就能解析返回结果：

// 替换为你实际的表单ID
const form = document.querySelector('#your-form-id');
const formData = new FormData(form);

fetch(form.action, {
  method: form.method || 'POST',
  body: formData,
  credentials: 'include' // 自动携带当前站点的登录Cookie
})
.then(res => res.text())
.then(pageHtml => {
  // 临时节点解析返回的页面内容，提取结果
  const tempDom = document.createElement('div');
  tempDom.innerHTML = pageHtml;
  const resultText = tempDom.querySelector('#message-bar .alert-text')?.innerText;
  console.log('提交结果：', resultText);
  // 你需要的后续处理逻辑都写在这里即可
})
.catch(err => console.error('提交出错：', err));

方案2：跨页面传递状态，适配必须整页跳转的场景 #

如果业务逻辑要求必须走整页跳转，你可以用本地存储做跨页面的状态同步，配合油猴脚本实现全流程自动化：

1. 先在提交前的页面执行如下代码，标记任务状态：

// 存储任务状态，也可以额外存当前处理到txt的第几行等上下文信息
localStorage.setItem('auto_form_task', 'pending_result');
// 触发提交
document.getElementById('btn-submit').click();

2. 跳转后在新页面执行如下代码读取结果，也可以把这段逻辑写成Tampermonkey油猴脚本，匹配站点所有URL自动执行：

window.addEventListener('load', () => {
  // 检测是否有待处理的表单任务
  if (localStorage.getItem('auto_form_task') === 'pending_result') {
    const resultText = document.querySelector('#message-bar .alert-text')?.innerText;
    console.log('提交结果：', resultText);
    // 处理完成后清空状态，或者更新状态跳转回表单页处理下一条数据
    localStorage.removeItem('auto_form_task');
    // 示例：处理完自动跳回表单页继续跑下一条
    // window.location.href = 'https://www.example.com';
  }
})

避坑说明 #

• 你之前尝试的setTimeout、sleep都是在原页面上下文排队执行的，页面卸载后所有任务都会被清除，自然不会生效
• 点击提交按钮时额外调用trigger('change')没有任何作用，问题和点击触发方式无关

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