ネイティブ側コードから Web 側コードを呼び出す

WebView2 コントロールで JavaScript を使用すると、要件を満たすようにネイティブ アプリをカスタマイズできます。 この記事では、WebView2 で JavaScript を使用する方法について説明し、WebView2 の高度な機能を使用して開発する方法を確認します。

開始する前に

この記事は、既に作業中のプロジェクトがあることを前提としています。 プロジェクトがなく、プロジェクトをフォローする場合は、「 WebView2 の使用を開始する」を参照してください。

基本的な WebView2 関数

次の関数を使用して、WebView2 アプリのネイティブ側コードに JavaScript を埋め込みます。

API	説明
ExecuteScriptAsync	WebView2 コントロールで JavaScript を実行します。 このメソッドは、ページの ドキュメント オブジェクト モデル (DOM) コンテンツ が読み込まれるか、 ナビゲーションが完了した後に呼び出します。 「 WebView2 の使用を開始する」を参照してください。
AddScriptToExecuteOnDocumentCreatedAsync	DOM が作成されると、すべてのページで実行されます。 このメソッドは、CoreWebView2 が初期化された後に呼び出します。

シナリオ: ExecuteScript JSON でエンコードされた結果

ExecuteScriptAsyncの結果は JSON でエンコードされるため、JavaScript の評価結果が文字列の場合、ネイティブ側コードは文字列の値ではなく JSON でエンコードされた文字列を受け取ります。

たとえば、次のネイティブ側コードでは、文字列が生成されるスクリプトが実行されます。 結果の文字列には、先頭の引用符、末尾の引用符、およびエスケープ スラッシュが含まれます。

string result = await coreWebView2.ExecuteScriptAsync(@"'example'");
Debug.Assert(result == "\"example\"");

このスクリプトは、JSON エンコードを ExecuteScript する文字列を返します。 Web 側のコードが既に JSON.stringify を呼び出している場合、結果は JSON 文字列として二重にエンコードされ、その値は JSON 文字列です。

結果に直接含まれているプロパティのみが JSON エンコード オブジェクトに含まれます。継承されたプロパティは、JSON でエンコードされたオブジェクトには含まれません。 ほとんどの DOM オブジェクトはすべてのプロパティを継承するため、Web 側コードでは明示的にプロパティの値を別のオブジェクトにコピーし、そのオブジェクトをネイティブ側コードに返す必要があります。 例:

Script	結果
performance.memory	{}
(() => { const {totalJSHeapSize, usedJSHeapSize} = performance.memory; return {totalJSHeapSize, usedJSHeapSize}; })();	{"totalJSHeapSize":4434368,"usedJSHeapSize":2832912}

performance.memoryだけを返すと、すべてのプロパティが継承されるため、結果にそのプロパティは表示されません。 代わりに、Web 側コードが特定のプロパティ値を performance.memory から新しいオブジェクトにコピーし、そのオブジェクトを返す場合、ネイティブ側コードはそれらのプロパティを結果に認識します。

ExecuteScriptAsyncを介してスクリプトを実行する場合、そのスクリプトはグローバル コンテキストで実行されます。 スクリプトを匿名関数に含めると、定義した変数がグローバル コンテキストを汚染しないようにするのに役立ちます。

例:

• スクリプト const example = 10; 複数回実行した場合、最初に実行したときに example が定義されているため、次回スクリプトを実行すると例外がスローされます。

• 代わりにスクリプトを実行すると、その匿名関数のコンテキストで example 変数が定義(() => { const example = 10; })();。 そうすることで、グローバルなコンテキストを汚染することはなく、複数回実行できます。

シナリオ: 専用の JavaScript ファイルを実行する

WebView2 コントロールから専用の JavaScript ファイルにアクセスできます。

インライン JavaScript コードは、迅速な JavaScript コマンドに適しています。 ただし、インライン JavaScript コードでは、コード エディターでの色テーマと行書式設定はサポートされていません。 そのため、Visual Studio など、大きなコード セクションを記述することは困難になります。

この問題を解決するには、コードを含む別の JavaScript ファイルを作成し、 ExecuteScriptAsync パラメーターを使用してそのファイルへの参照を渡します。

別の専用 JS ファイルを作成して使用するには、次の手順を実行します。

1. プロジェクトに .js ファイルを作成し、実行する JavaScript コードを追加します。 たとえば、 script.js というファイルを作成します。

2. ページの移動が完了した後に次のコードを貼り付けて、JavaScript ファイルを ExecuteScriptAsync に渡される文字列に変換します。

   string text = System.IO.File.ReadAllText(@"C:\PATH_TO_YOUR_FILE\script.js");
   

3. text変数を渡してExecuteScriptAsyncします。

   await webView.CoreWebView2.ExecuteScriptAsync(text);
   

シナリオ: ドラッグ アンド ドロップ機能を削除する

このセクションでは、JavaScript を使用して、WebView2 コントロールからドラッグ アンド ドロップ機能を削除します。

まず、現在のドラッグ アンド ドロップ機能を確認します。

1. ドラッグ アンド ドロップを行うために .txt ファイルを作成します。 たとえば、 contoso.txt という名前のファイルを作成し、そこにテキストを追加します。

2. F5 キーを押して、プロジェクトをビルドして実行します。

3. contoso.txt ファイルを WebView2 コントロールにドラッグ アンド ドロップします。 新しいウィンドウが開きます。これは、サンプル プロジェクトのコードの結果です。

   

4. 次に、WebView2 コントロールからドラッグ アンド ドロップ機能を削除するコードを追加します。 コード内で CoreWebView2 オブジェクトが初期化された後に、次のコードを貼り付けます。

   await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
      "window.addEventListener('dragover',function(e){e.preventDefault();},false);" +
      "window.addEventListener('drop',function(e){" +
         "e.preventDefault();" +
         "console.log(e.dataTransfer);" +
         "console.log(e.dataTransfer.files[0])" +
      "}, false);");
   

5. F5 キーを押して、プロジェクトをビルドして実行します。

6. contoso.txt を WebView2 コントロールにドラッグ アンド ドロップしてみます。 ドラッグ アンド ドロップができないことを確認します。

シナリオ: コンテキスト メニューを削除する

このセクションでは、WebView2 コントロールから右クリック メニューを削除します。

まず、右クリック メニューの現在の機能を確認します。

1. F5 キーを押して、プロジェクトをビルドして実行します。

2. WebView2 コントロールの任意の場所を右クリックします。 コンテキスト メニューには、既定の右クリック メニュー コマンドが表示されます。

   

   次に、WebView2 コントロールから右クリック メニュー機能を削除するコードを追加します。

3. コード内で CoreWebView2 オブジェクトが初期化された後に、次のコードを貼り付けます。

   await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('contextmenu', window => {window.preventDefault();});");
   

4. F5 キーを押して、プロジェクトをビルドして実行します。 右クリック メニューを開けないことを確認します。

関連項目

• WebView2 の使用を開始する
• WebView2Samples リポジトリ - WebView2 機能の包括的な例。
• WebView2 API リファレンス
• WebView2 API の概要での Web/ネイティブ相互運用。