UWP 在 WebView 中執行 JavaScript 程式碼（用於模擬用戶輸入等）

  • 2020 年 2 月 10 日
  • 筆記

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 ），不得用於商業目的，基於本文修改後的作品務必以相同的許可發布。如有任何疑問，請 與我聯繫 ([email protected]) 。

Tags:

VirMach 便宜 VPS