WebView2　応用テクニック

独自のコンテキストメニューを表示する

WebView2コントロール上で右クリックするとブラウザのコンテキストメニューが表示されますが、これを独自のコンテキストメニューに変更します。

方法

画面にコンテキストメニューを貼り付け、メニュー内容を作成します。

CoreWebView2InitializationCompletedイベントにて初期設定を行います。

WebView2コントロールのコンテキストメニューを「表示しない」設定を行います。

//C#書式

webView2.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;

JavaScriptにより、Webページでコンテキストメニュー表示のイベントが発生した場合に、 .NET側にメッセージで通知します。
クリックした座標情報も一緒に送ります。
また、コンテキストメニュー表示時に他の場所をクリックした場合に閉じれるように、マウスダウンイベントでもメッセージを送るようにします。

//JavaScript書式

document.addEventListener('mousedown', function (event)
{
window.chrome.webview.postMessage('mousedown');
});

document.addEventListener('contextmenu', function (event)
{
window.chrome.webview.postMessage('contextmenu,' + event.screenX + ',' + event.screenY);
});

AddScriptToExecuteOnDocumentCreatedAsyncメソッドでJavaScriptのコードをWebページに追加します。

JavaScriptからのメッセージを.NET側で受け取り、コンテキストメニューを表示します。

受信したメッセージを判断して、
contextmenuであればcontextMenuStripを座標の位置に表示させます。
mousedownであればcontextMenuStripを非表示にします。

						Public Class OridinalContextMenu
							Private Sub OridinalContextMenu_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 webView2_CoreWebView2InitializationCompleted(sender As Object, e As Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs) Handles webView2.CoreWebView2InitializationCompleted
						
								'ブラウザのコンテキストメニューを非表示に設定
								webView2.CoreWebView2.Settings.AreDefaultContextMenusEnabled = False
						
								'JavaScriptにて、mousedownイベントとcontextmenuイベント発生時に.NETにメッセージを送る
								Dim js = New System.Text.StringBuilder()
								js.AppendLine("document.addEventListener('mousedown', function (event)")
								js.AppendLine("{")
								js.AppendLine("    window.chrome.webview.postMessage('mousedown');")
								js.AppendLine("});")
								js.AppendLine("document.addEventListener('contextmenu', function (event)")
								js.AppendLine("{")
								js.AppendLine("    window.chrome.webview.postMessage('contextmenu,' + event.screenX + ',' + event.screenY);")
								js.AppendLine("});")
						
								'JavaScriptコードをWebページに追加する
								webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(js.ToString())
						
							End Sub
						
							Private Sub button1_Click(sender As Object, e As EventArgs) Handles button1.Click
						
								If webView2.CoreWebView2 Is Nothing Then Return
						
								webView2.CoreWebView2.Navigate("https://web.biz-prog.net/test/testpage.html")
						
							End Sub
						
							Private Sub webView2_WebMessageReceived(sender As Object, e As Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs) Handles webView2.WebMessageReceived
						
								Dim message As String() = e.TryGetWebMessageAsString().Split(",")
						
								Select Case message(0)
						
									Case "mousedown"
										ContextMenuStrip1.Hide()
						
									Case "contextmenu"
										ContextMenuStrip1.Show(New Point(Integer.Parse(message(1)), Integer.Parse(message(2))))
						
								End Select
							End Sub
						
						End Class

						public partial class OridinalContextMenu : Form
						{
							public OridinalContextMenu()
							{
								InitializeComponent();
							}
					
							private void OridinalContextMenu_Load(object sender, EventArgs e)
							{
								InitializeAsync();
							}
					
							async void InitializeAsync()
							{
								await webView2.EnsureCoreWebView2Async(null);
							}
					
							private void webView2_CoreWebView2InitializationCompleted(object sender, Microsoft.Web.WebView2.Core.CoreWebView2InitializationCompletedEventArgs e)
							{
								//ブラウザのコンテキストメニューを非表示に設定
								webView2.CoreWebView2.Settings.AreDefaultContextMenusEnabled = false;
					
								//JavaScriptにて、mousedownイベントとcontextmenuイベント発生時に.NETにメッセージを送る
								var js = new System.Text.StringBuilder();
								js.AppendLine("document.addEventListener('mousedown', function (event)");
								js.AppendLine("{");
								js.AppendLine("    window.chrome.webview.postMessage('mousedown');");
								js.AppendLine("});");
								js.AppendLine("document.addEventListener('contextmenu', function (event)");
								js.AppendLine("{");
								js.AppendLine("    window.chrome.webview.postMessage('contextmenu,' + event.screenX + ',' + event.screenY);");
								js.AppendLine("});");
					
								//JavaScriptコードをWebページに追加する
								webView2.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(js.ToString());
							}
					
							private void button1_Click(object sender, EventArgs e)
							{
								if (webView2.CoreWebView2 == null) return;
					
								webView2.CoreWebView2.Navigate("https://web.biz-prog.net/test/testpage.html");
							}
					
							private void webView2_WebMessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs e)
							{
								string[] message = e.TryGetWebMessageAsString().Split(',');
					
								switch (message[0])
								{
									case "mousedown":
										contextMenuStrip1.Hide();
										break;
									case "contextmenu":
										contextMenuStrip1.Show(new Point(int.Parse(message[1]), int.Parse(message[2])));
										break;
								}
							}
						}

WebView2 応用テクニック