WPF WebView2 ローカルファイルを読み込む

Uncategorized
431 words

WebView2 でローカルファイルを読み込んで、WPFとWebView2でデータの受け渡しを試してみました。

完成形

Blocklyでビジュアルプログラミングをして、JavaScriptを実行してみました。フッター部で Blockly で作ったソースコードを表示しています。

概要

  1. WebView2 でローカルファイルを読み込んでいます。
  2. AvalonEdit に WebView2 から JavaScript を受け取って表示しています。
  3. JavaScript実行ボタンを押すと、AvalonEdit の JavaScript を WebView2 に投げて実行しています。

開発環境

機能説明

じっくり知りたい人は、GitHub からソースコードをダウンロードして下さい。

ここではさっくり説明します。

WebView2 でローカルファイルを読み込む

1
2
3
4
5
6
7
8
// 実行ディレクトリを取得
var currentDirectory = Environment.CurrentDirectory;

// ローカルファイルのURIを作成
var uri = new Uri($"{currentDirectory}/AppData/index.html");

// WebView2にローカルファイルのURIを設定
webView.CoreWebView2.Navigate(uri.AbsoluteUri);

注意する点としては、ローカルファイルは絶対パスで指定してあげましょう。

あと、実行ディレクトリ内の index.html を参照するため、出力ディレクトリにコピーする設定に変えておきます。

WebView2 からデータを受け取る

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
public MainWindow()
{
    InitializeComponent();
    InitializeAsync();
}

async void InitializeAsync()
{
    // WebView2の初期化が終わるまで待機
    await webView.EnsureCoreWebView2Async(null);

    // window.chrome.webview.postMessage を受け取るイベント設定
    webView.CoreWebView2.WebMessageReceived += CoreWebView2_WebMessageReceived;
}

private void CoreWebView2_WebMessageReceived(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
    // Webから受け取ったデータをAvalonEditに設定
    textEditor.Text = e.TryGetWebMessageAsString();
}

webView.CoreWebView2.WebMessageReceived

webView.CoreWebView2.WebMessageReceived このイベントで WebView2 からデータを受け取ることが出来ます。

WebView2 にデータを渡す

1
webView.CoreWebView2.ExecuteScriptAsync("runCode()");

今回は、JavaScript実行ボタンを押した時に、WebView2側の「runCodeファンクション」を実行するようにしています。

終わりに

ソースコード

実行ファイル

参考

https://docs.microsoft.com/ja-jp/microsoft-edge/webview2/gettingstarted/wpf