通过浏览器F12开发者工具的javascript控制台给Vue表单赋值

最新推荐文章于 2025-03-26 16:46:22 发布

cgs108

最新推荐文章于 2025-03-26 16:46:22 发布

阅读量5k

点赞数 3

分类专栏： javascript 文章标签： javascript vue.js 前端 F12 浏览器控制台

本文链接：https://blog.csdn.net/CGS_______/article/details/125748778

版权

javascript 专栏收录该内容

22 篇文章

订阅专栏

本文探讨了在.NET的WinForm WebBrowser控件中，如何处理加载Vue和Element-UI构建的网页表单自动录入的难题。由于Vue的双向绑定特性，直接修改DOM元素无法通过表单校验。解决方案是通过获取Vue实例并直接修改Vue模型的值。通过调用`execScript`执行JavaScript代码，例如`document.querySelector('#js_el_form_create3').__vue__.model.cvin='11111111111111111';`，成功实现了对Vue应用的正确操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题背景

做一个网页表单自动录入软件，网页不是我方开发的。自动录入软件是基于.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';");

在JavaScript中测试，如下：

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