WebView2の配置
- NuGetで「Microsoft.Web.WebView2」をインストールする。
- <Window>タグ内に以下のコードを追加する
xmlns:wv2="clr-namespace:Microsoft.Web.WebView2.Wpf;assembly=Microsoft.Web.WebView2.Wpf"
- WebView2コントロールを追加する
<DockPanel>
<wv2:WebView2 Name="webView"/>
/DockPanel>
ローカルページを開く
private async void Window_Loaded(object sender, RoutedEventArgs e)
{
await webView.EnsureCoreWebView2Async(null);
string uri = System.IO.Directory.GetCurrentDirectory() + @"\Html\Test.html";
webView.CoreWebView2.Navigate(uri);
}
JavaScriptからメッセージを受け取る
Wpfコード
webViewにWebMessageReceivedイベントを追加する
private async void Window_Loaded(object sender, RoutedEventArgs e)
{
await webView.EnsureCoreWebView2Async(null);
string uri = System.IO.Directory.GetCurrentDirectory() + @"\Html\Test.html";
webView.CoreWebView2.Navigate(uri);
webView.CoreWebView2.WebMessageReceived += GetMessage;
}
private void GetMessage(object sender, CoreWebView2WebMessageReceivedEventArgs e)
{
Debug.WriteLine(e.TryGetWebMessageAsString());
}
Htmlコード
window.chrome.webview.postMessageを追加する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>TEST Page</title>
<script language="javascript" type="text/javascript">
function PostMessage() {
document.getElementById("output").innerHTML = "Tokyo";
window.chrome.webview.postMessage('Tokyo');
}
</script>
</head>
<body>
<input type="button" value="Button" onclick="PostMessage();"/><br />
<br />
<div id="output"></div>
</body>
</html>
WpfコードからJavaScriptを呼び出す
private async void Button_Click(object sender, RoutedEventArgs e)
{
await webView.CoreWebView2.ExecuteScriptAsync($"PostMessage()");
}