UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) - walterlv

原文: UWP 在 WebView 中执行 JavaScript 代码(用于模拟用户输入等) - walterlv

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

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

本文将介绍做法。


准备环境

在页面(XAML)中放一个 WebView,然后取个名字,比如就叫做 WebView

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

WebView.NavigationCompleted += OnNavigationCompleted;
WebView.Navigate(new Uri("https://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://walterlv.com/post/invoke-web-script-in-webview.html ,以避免陈旧错误知识的误导,同时有更好的阅读体验。

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

Please enable JavaScript to view the comments powered by Disqus.
posted on 2019-01-03 13:13 NET未来之路 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lonelyxmas/p/10213652.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值