WebView2　応用テクニック

JavaScriptから.NETのオブジェクトを使用する

WebView2で表示しているページ内のJavaScriptから、.NETのオブジェクトを使用できます。
メソッドを実行したり、プロパティに設定・参照など行えます。

JavaScriptから.NETのクラスにアクセスする為に、.NETのクラスに公開用の属性定義を追加します。

//C#
[ClassInterface(ClassInterfaceType.AutoDual)]
[ComVisible(true)]
public class JsCall
{
    ・・・

webView2.CoreWebView2.AddHostObjectToScriptで、公開設定した.NETのクラスのオブジェクトをJavaScript側に登録します。
これでスクリプト側からアクセスできるようになります。
//C#
//第一引数は、JavaScriptからアクセスするときに使用する名称
//第二引数は、公開設定したクラスのオブジェクト

webView2.CoreWebView2.AddHostObjectToScript("jscall", new JsCall());

html側には、JavaScriptで呼び出し用のコードを記述します。
//JavaScript
//書式：chrome.webview.hostObjects.登録したオブジェクト名;

//メソッドの実行
chrome.webview.hostObjects.jscall.ShowMessage('call .net object test');

//オブジェクトの取得
const jscall = chrome.webview.hostObjects.jscall;

//プロパティアクセス
jscall[100] = 'indexer 100';
alert(await jscall[100]);

プロパティやメソッドの戻り値を参照する場合は非同期(async/await)で実行する必要があります。
async function callProp() {
    alert(await chrome.webview.hostObjects.jscall.Prop);
}

サンプル

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
Imports System.Runtime.InteropServices
 
Public Class JStoCSobj
    Private Sub JStoCSobj_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        InitializeAsync()
    End Sub
 
    Private Async Sub InitializeAsync()
        Await webView2.EnsureCoreWebView2Async(Nothing)
    End Sub
 
    Private Sub button1_Click(sender As Object, e As EventArgs) Handles button1.Click
 
        If webView2.CoreWebView2 Is Nothing Then Return
 
        Dim html As New System.Text.StringBuilder()
        html.AppendLine("<!DOCTYPE html>")
        html.AppendLine("<html lang='ja'>")
        html.AppendLine("<head>")
        html.AppendLine("<script language='javascript' type='text/javascript'>")
        html.AppendLine("    function callFunc() {chrome.webview.hostObjects.jscall.ShowMessage('call .net object test');}")
        html.AppendLine("    async function callProp() {")
        html.AppendLine("        const jscall = chrome.webview.hostObjects.jscall;")
        html.AppendLine("        jscall.Prop='property access';")
        html.AppendLine("        alert(await jscall.Prop);")
        html.AppendLine("    }")
        html.AppendLine("    async function callIndexer() {")
        html.AppendLine("        const jscall = chrome.webview.hostObjects.jscall;")
        html.AppendLine("        jscall[100] = 'indexer 100';")
        html.AppendLine("        alert(await jscall[100]);")
        html.AppendLine("    }")
        html.AppendLine("</script>")
        html.AppendLine("<head>")
        html.AppendLine("<body>")
        html.AppendLine("<h1>JavaScriptから.NETアクセス</h1>")
        html.AppendLine("<input type='button' value='.NETのメソッドコール' onclick='callFunc();'/>")
        html.AppendLine("<input type='button' value='.NETのプロパティアクセス' onclick='callProp();'/>")
        html.AppendLine("<input type='button' value='.NETのインデクサーアクセス' onclick='callIndexer();'/>")
        html.AppendLine("</body>")
        html.AppendLine("</html>")
 
        'htmlの内容を表示
        webView2.CoreWebView2.NavigateToString(html.ToString())
 
        'JsCallクラスのオブジェクトをjscallとして登録
        webView2.CoreWebView2.AddHostObjectToScript("jscall", New JsCall())
 
    End Sub
 
    <ClassInterface(ClassInterfaceType.AutoDual)>
    <ComVisible(True)>
    Public Class JsCall
 
        'JavaScriptから実行するメソッド
        Public Sub ShowMessage(mess As String)
            MessageBox.Show(mess)
        End Sub
 
        'JavaScriptからアクセスするプロパティ
        Public Property Prop As String
 
        'JavaScriptからアクセスするインデクサー
        Private m_dictionary As New Dictionary(Of Integer, String)()
 
        <System.Runtime.CompilerServices.IndexerName("Items")>
        Default Public Property this(index As Integer) As String
            Get
                Return m_dictionary(index)
            End Get
            Set
                m_dictionary(index) = Value
            End Set
        End Property
 
    End Class
 
End Class

参考

CoreWebView2.AddHostObjectToScript(String, Object) Method