作成日:  (更新日: )

WebView2 のスニペット集

このページは、WebView2 のスニペットなどをまとめる予定のページです。

目次

注意

スニペット

ローカルファイル の指定

例: 実行フォルダ上にある test.html を指定
var currentDirectory = Environment.CurrentDirectory;
webView.Source = new Uri($"{currentDirectory}/test.html");

データ送信 (JavaScript → C#)

JavaScript 側 (送信)
window.chrome.webview.postMessage("JavaScriptからのデータ送信");
C# 側 (受信)
private void Test()
{
    webView.WebMessageReceived += webView_WebMessageReceived;
}

private void webView_WebMessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)
{
    var s = e.TryGetWebMessageAsString();
    MessageBox.Show(s);
}

データ送信 (C# → JavaScript)

C# 側 (送信)
private void Test()
{
    webView.NavigationCompleted += webView_NavigationCompleted;
}

private void webView_NavigationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2NavigationCompletedEventArgs e)
{
    webView.CoreWebView2.PostWebMessageAsString("C#からのデータ送信");
}
JavaScript 側 (受信)
window.chrome.webview.addEventListener('message', function(e){
    alert(e.data);
});

C# から JavaScript コードを実行する

C#
await webView.ExecuteScriptAsync("alert(1)");

C# のオブジェクトを JavaScript で使用できるようにする

C#
/// <summary>
/// テスト用のクラスです。
/// </summary>
[ClassInterface(ClassInterfaceType.AutoDual)]
[ComVisible(true)]
public class Test
{
    /// <summary>
    /// テスト用のメソッドです。
    /// </summary>
    public void TestMethod(string s)
    {
        MessageBox.Show("値: " + s);
    }
}

var test = new Test();
webView.CoreWebView2.AddHostObjectToScript("test", test);
JavaScript
<button id="button1">test</button>
<script>
    document.getElementById("button1").addEventListener('click', function(){
        chrome.webview.hostObjects.test.TestMethod('javascript')
    });
</script>

参考