.NET桌面程序混合开发之三：WebView2与JS的深度应用

.NET桌面程序混合开发之三：WebView2与JS的深度应用

C#.netWinformHybrid`

在 WebView2 控件中使用 JavaScript 根据需求自由扩展原生应用的能力。本文探讨如何在 WebView2 中使用 JavaScript，并列举如何使用高级 WebView2 特性和功能进行开发。

一、开始之前

本文假定你已经有过WebView2开发的经验。如果你未接触过WebView2，请先阅读本系列文章的前两篇 .NET桌面程序混合开发之一：Winform+H5，WebView2概览 和 .NET桌面程序混合开发之二：在原生WinFrom程序中使用WebView2

二、WebView2核心功能

以下两个函数助你将JavaScript植入你的应用中

 

API	描述
ExecuteScriptAsync	在WebView2中执行JavaScript脚本。可以从本系统文章的前两篇中了解更多信息。
OnDocumentCreatedAsync	当页面的DOM创建时执行。

1641140151454.table.html 764 B

 

三、场景1：运行指定脚本文件

这个场景中，将从WebView2访问一段指定的JavaScript脚本。

注意：尽管编写内联 JavaScript 对于 JavaScript  运行效率可能比较高效，但您会丢失 JavaScript 颜色主题和行格式，也使得在 Visual Studio 中编写大段代码变得困难。

为解决这个问题，先创建单独的JavaScript文件，再将对文件的引用传给函数 ExecuteScriptAsync 的参数。

1. 在工程中新建一个.js文件，里面写好你想要运行的js代码。这里在工程中新建script.js文件。
2. 将这个js文件转化为String对象，然后传给函数 ExecuteScriptAsync
   a. 把脚本文件转换为字符串对象

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

   b. 将以上代码复制到你的主窗体初始化函数中
3. 通过ExecuteScriptAsync将脚本传递给页面

   await webView.CoreWebView2.ExecuteScriptAsync(text);

四、场景2：去掉页面拖拽功能

本部分探讨使用脚本去除WebView2控件中的页面的拖拽功能。
开始前，先看下当前控件所具备的拖拽功能。

1. 任意创建一个.txt文件，比如，创建名为contoso.txt，写入任意文字。
2. 运行之前系统文章中创建的程序。
3. 把 contoso.txt 文件拖拽到程序的WebView2控件时，会自动打开一个新的窗口显示文件内容。
   

接下来，添加代码以移除WebView2控件自带的拖拽功能：

1. 把以下代码拷贝到主窗体的初始化函数InitializeAsync()中：

await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('dragover',function(e){e.preventDefault();},false);");

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

2. 运行工程
3. 试着再次将contoso.txt拖入WebView2控件中，会发现已经不打开新窗体了。

五、场景3：禁用右键菜单

本部分将移除页面上默认的右建菜单。开始前，先看下在当前的页面上点右键的弹出菜单：

1. 运行工程
2. 在WebView2控件的任意地方点右键。在弹出的菜单中有各种默认的菜单项。
   

接着来添加代码移除右键弹出菜单功能。

1. 将下面的代码复制粘贴到窗体初始化函数InitializeAsync()中

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

2. 再次运行，此时已无法点开右键了。