QWebEngine应用实现OnlyFans登录页自动填充的执行时机问题

OnlyFans这类站点是前端框架构建的单页应用，Qt提供的loadFinished信号、DocumentReady/Deferred等内置注入点，仅能保证初始静态HTML资源加载完成，无法感知前端框架后续异步执行的DOM渲染流程——脚本执行时邮箱、密码输入框还没被框架挂载到DOM树，querySelector返回null，赋值自然抛出类型错误。固定延迟的方案本质是赌渲染耗时，受网络、设备性能影响极大，没有生产可用性。

1. JS侧：用DOM监听替代固定延迟 #

放弃setTimeout等待逻辑，使用原生MutationObserver接口监听DOM树变更，目标表单元素一旦挂载就立刻执行填充，既不会提前执行报错，也没有多余等待。
注意：React/Vue类框架内部维护了独立的状态副本，直接通过elem.value = xxx赋值无法被框架识别，必须通过原生属性描述符赋值+派发事件的方式写入值，否则会出现输入框显示了填充内容，但提交时提示字段为空的问题。

自动填充脚本代码如下：

const tryAutofill = () => {
    const emailInput = document.querySelector('input[name="email"]');
    const pwdInput = document.querySelector('input[name="password"]');
    if (!emailInput || !pwdInput) return false;

    // 写入值并触发框架可识别的原生事件
    const writeValue = (el, val) => {
        const valueProp = Object.getOwnPropertyDescriptor(Object.getPrototypeOf(el), 'value');
        valueProp.set.call(el, val);
        el.dispatchEvent(new Event('input', { bubbles: true }));
        el.dispatchEvent(new Event('change', { bubbles: true }));
    };

    writeValue(emailInput, 'random@gmail.com');
    writeValue(pwdInput, 'randompass');
    return true;
};

// 先执行一次检查，兼容脚本注入时元素已经渲染完成的场景
if (tryAutofill()) {
    console.log('Autofill completed on initial check');
} else {
    // 启动DOM监听
    const domObserver = new MutationObserver(() => {
        if (tryAutofill()) {
            domObserver.disconnect(); // 填充完成立即停止监听，降低性能开销
        }
    });
    domObserver.observe(document.documentElement, {
        childList: true,
        subtree: true
    });
}

2. Qt侧：调整脚本注入配置 #

不要在loadFinished回调里手动执行runJavaScript，通过QWebEngineScriptCollection提前注入脚本，保证监听逻辑从DOM构建初始阶段就生效，避免漏掉早期的DOM渲染节点。
注入配置代码如下：

QWebEngineScript autofillScript;
autofillScript.setName("stable_autofill");
// 填入上面编写的带DOM监听的JS源码
autofillScript.setSourceCode(R"(
// 此处粘贴上述完整JS脚本代码
)");
// 选择最早的注入点，DOM开始构建时就注入监听逻辑
autofillScript.setInjectionPoint(QWebEngineScript::DocumentCreation);
autofillScript.setRunsOnSubFrames(true); // 兼容iframe嵌套表单场景
// 必须使用MainWorld，和页面JS同上下文运行，否则派发的事件无法被前端框架识别
autofillScript.setWorldId(QWebEngineScript::MainWorld);
view.page()->scripts().insert(autofillScript);

• 禁止使用ApplicationWorld运行填充脚本：隔离运行世界和页面主上下文不互通，会导致值写入后前端框架无法读取。
• 填充完成必须断开MutationObserver监听，避免长期监听DOM变化造成不必要的性能损耗。
• 如果目标站点后续修改了表单字段的选择器（比如把name=email改成自定义属性标识），仅需更新querySelector的匹配规则即可，等待逻辑无需调整。
• 该方案对所有动态渲染的页面通用，不需要根据网络、设备性能调整等待参数，元素渲染完成后10ms内即可完成填充，稳定性远高于固定延迟方案。

内容的提问来源于stack exchange，提问作者daniel.kish