问题背景

做一个网页表单自动录入软件，网页不是我方开发的。自动录入软件是基于.NET的C/S客户端软件，它使用WinForm的WebBrowser控件加载网站，网站的前端是使用 Vue 和 Element-UI 开发的。

该网站的脚本、资源是用 webpack 打包的，我们遇到的技术问题是无法在浏览器的F12开发者工具JavaScript控制台中使用常规的 JQuery 语法操作其 DOM 元素，给诸如文本框、下拉框、日期选择框赋值。

举个例子：

如上图所示，无法通过 $('#reconciliation > form > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div > div > div > input').val('cgs'); 给文本框赋值。

虽然可以通过 $('#reconciliation > form > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div > div > div > input').value = "cgs"; 给文本框赋值，但是实际上点击查询按钮时，无法通过表单校验，如下：

这正是由于 Vue 的双向绑定导致的。我们只修改了文本框中的值，实际上没有修改 Vue 实例的值。

思路

Vue 具有双向绑定属性。所谓双向绑定，指的是 vue 实例中的data 与其渲染的DOM元素的内容保持一致，无论谁被改变，另一方会相应的更新为相同的数据。

所以，要想解决上述问题，我们需要在浏览器的F12开发者工具JavaScript控制台中获取 Vue 实例 。

观察 form 表单，如下：

在JavaScript控制台中打印可以打印Vue实例，如下：

我们可以展开打印的实例，可以找到 model ，可以看到 model 下面都是表单的字段，如下：

现在可以测试一下，通过，，，算了今天太累直接看解决办法吧…

解决办法

获取 webbrowser 控件的 HtmlWindows，再将其转换为 IHTMLWindow2 ，然后执行 JavaScript 脚本，问题解决。如下：

HtmlWindow htmlWindow = webBrowser1.Document.Window;
IHTMLWindow2 win = htmlWindow.DomWindow as IHTMLWindow2;
win.execScript($"document.querySelector(\"#js_el_form_create3\").__vue__.model.cvin = '11111111111111111';");
1
2
3

在JavaScript中测试，如下：

document.querySelector("#js_el_form_create3").__vue__.model.cvinlite = "111111";
1