UWP 在 WebView 中执行 JavaScript 代码（用于模拟用户输入等）

walterlv

发布于 2020-02-10 16:01:08

2K0

发布于 2020-02-10 16:01:08

文章被收录于专栏：walterlv - 吕毅的博客walterlv - 吕毅的博客

UWP 中使用 WebView 时可以在网页中额外执行一些代码。于是你几乎可以在网页上做任何事情，那些你可以在浏览器控制台中做的事情。

本文将介绍做法。

准备环境

在页面（XAML）中放一个 WebView，然后取个名字，比如就叫做 WebView。

监听 NavigationCompleted 事件，然后导航到需要操作的页面。

WebView.NavigationCompleted += OnNavigationCompleted;
WebView.Navigate(new Uri("https://blog.walterlv.com"));

private async void OnNavigationCompleted(WebView sender, WebViewNavigationCompletedEventArgs e)
{
    // 我们接下来的代码都将在这里编写。
}

要执行 JavaScript 代码，必须要导航完成才行，所以我们接下来的代码都是写在 NavigationCompleted 事件处理函数中的。

执行 JavaScript 代码

模拟用户输入

下面这一句的代码是填充用户 Id 一栏：

await WebView.InvokeScriptAsync("eval", new[]
{
    "document.getElementById('userId').value = 'walterlv';"
});

登录页面截图来自于码友网。

JavaScript eval(string) 函数

在上面的代码中，eval 是指执行 JavaScript 的 eval 函数，并且将后面的字符串数组作为它的参数传入。

在 JavaScript 中，eval(string) 函数可计算某个字符串，并执行其中的的 JavaScript 代码。在计算结束后，会返回一个字符串，就是参数中那个字符串执行完之后的返回值（如果有的话）。

于是意味着你可以通过这种方式拿到输入框中的值：

var userId = await WebView.InvokeScriptAsync("eval", new[]
{
    "document.getElementById('userId').value;"
});

执行完后，可以得到 userId 的值是 walterlv 字符串；也就是我们上一步填充的那个值。

模拟用户登录

完整的输入用户名、密码，并点击登录按钮的代码则是这样的：

await LoginWebView.InvokeScriptAsync("eval", new[]
{
    "document.getElementById('userId').value = 'walterlv';"
});
await LoginWebView.InvokeScriptAsync("eval", new[]
{
    "document.getElementById('password').value = '不想让你看见的密码';"
});
await Task.Delay(1000);
await LoginWebView.InvokeScriptAsync("eval", new[]
{
    "document.getElementById('submit').click();"
});

参考资料

本文会经常更新，请阅读原文： https://blog.walterlv.com/post/invoke-we

本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。欢迎转载、使用、重新发布，但务必保留文章署名吕毅（包含链接： https://blog.walterlv.com ），不得用于商业目的，基于本文修改后的作品务必以相同的许可发布。如有任何疑问，请与我联系 (walter.lv@qq.com) 。

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2018-12-30 ，如有侵权请联系 cloudcommunity@tencent.com 删除

javascript