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

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

一、开始之前

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

二、WebView2核心功能

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

 

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

 

三、场景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. 再次运行，此时已无法点开右键了。