WebView2 でローカルファイルを読み込んで、WPFとWebView2でデータの受け渡しを試してみました。
完成形
Blocklyでビジュアルプログラミングをして、JavaScriptを実行してみました。フッター部で Blockly で作ったソースコードを表示しています。
概要
- WebView2 でローカルファイルを読み込んでいます。
- AvalonEdit に WebView2 から JavaScript を受け取って表示しています。
- JavaScript実行ボタンを押すと、AvalonEdit の JavaScript を WebView2 に投げて実行しています。
開発環境
- Windows 10 Home 20H2
- Visual Studio Community 2019
- .NET Core 3.1
- Microsoft.Web.WebView2 1.0.721-prerelease
- AvalonEdit 6.0.1
- MaterialDesignThemes 3.2.0
機能説明
じっくり知りたい人は、GitHub からソースコードをダウンロードして下さい。
ここではさっくり説明します。
WebView2 でローカルファイルを読み込む
1 | // 実行ディレクトリを取得 |
注意する点としては、ローカルファイルは絶対パスで指定してあげましょう。
あと、実行ディレクトリ内の index.html を参照するため、出力ディレクトリにコピーする設定に変えておきます。
WebView2 からデータを受け取る
1 | public MainWindow() |
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