Android应用WebView填充指定网页表单失败，求技术解决方案

我是一名Android开发者，不太熟悉Web开发，现求助以下问题：

目标网站为停车服务查询页面，页面上有一个包含文本框和按钮的表单，页面源码如下：

<div class="edpk-form">
                <form>
                    <input type="hidden" name="_token" value="IvpmhoYWOFx4s5LPLznzg9NY2vnccX0yebxXt2Oi">                    <div class="form-wrap">
                        <div class="input-wrap">
                            <input type="text" name="fine" :class="{'field-error': error}" v-model="vars.plate" :placeholder="lang.enter" required />
                        </div>
                        <div class="submit-wrap">
                            <button class="button blue" type="submit" @click.prevent="findTicket()">{{ lang.search }}</button>
                        </div>
                    </div>
                    <div :id="'pks_eZUuuzPYbGXz6nWn_wrap'" style="display:none;">
                        <input type="text" v-model="vars.pks_MbGfCEQWq6mwwcDm" name="pks_tFMmGu7d5GRyedr1" value="" id="pks_mxhG2rVavA6kdgbG">
                        <input type="text" v-model="vars.eyJpdiI6IjVYZFBwT1VQVXlOcit5Wncvd1E5TXc9PSIsInZhbHVlIjoibGQzbHY0YmJ2bjVCTUFHaDVMb0NyQT09IiwibWFjIjoiYzU5MmYxZjVjZTVkZGE1ZDA4ZmJlZjk2N2ExNGM4MWE2ZWI3ZjA5MjZiNTA0ZGQ3NzdiYzU3MGFkMGU0ZTc5OCJ9" name="pks_valid">
                    </div>
                </form>
            </div>

我尝试了两种方式填充表单并提交，但都未成功：

• 第一种代码能填充表单，但页面持续刷新无结果：

WebView webView = findViewById(R.id.webview_id);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        webView.loadUrl("javascript:(function() { " +
                    "document.getElementsByName('fine')[0].value = 'ABC123XY';" +
                    "document.forms[0].submit();" +
                    "})()");
    }
});

• 第二种代码能点击按钮，但系统提示表单未填写：

webView.loadUrl("javascript:document.querySelector('.input-wrap input[name=\"fine\"]').value = 'ABC1234XY';");
webView.loadUrl("javascript:document.querySelector('.button.blue[type=submit]').click();");

问题根源 #

页面基于Vue框架开发：

1. 输入框绑定了v-model="vars.plate"，直接通过DOM修改value不会同步到Vue的响应式数据，导致Vue判定表单未填写；
2. 提交按钮用@click.prevent="findTicket()"阻止了默认表单提交，直接调用form.submit()无法触发Vue的查询逻辑，只会触发页面刷新。

可行解决方案 #

方案1：触发输入事件同步数据后点击按钮

通过dispatchEvent触发input事件，让Vue感知到输入框内容变化，再调用按钮的点击事件触发查询：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        webView.loadUrl("javascript:(function() { " +
            "var input = document.querySelector('input[name=\"fine\"]'); " +
            "input.value = 'ABC123XY'; " +
            "input.dispatchEvent(new Event('input')); " +
            "document.querySelector('.button.blue[type=submit]').click(); " +
        "})()");
    }
});

方案2：直接访问Vue实例调用查询方法

如果页面的Vue实例可通过DOM元素获取，可直接修改绑定的变量并调用查询方法：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        webView.loadUrl("javascript:(function() { " +
            "var vueInstance = document.querySelector('.edpk-form').__vue__; " +
            "vueInstance.vars.plate = 'ABC123XY'; " +
            "vueInstance.findTicket(); " +
        "})()");
    }
});

额外注意 #

页面中隐藏的pks_相关字段是反爬验证字段，其值会动态生成，确保提交时这些字段的当前有效值被保留（无需手动修改，Vue会自动维护）。

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