问题背景

做一个网页表单自动录入软件,网页不是我方开发的。自动录入软件是基于.NET的C/S客户端软件,它使用WinForm的WebBrowser控件加载网站,网站的前端是使用 VueElement-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';");

在JavaScript中测试,如下:

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

前往低代码交流专区

更多推荐