WebView2 (WPF) - 从本地文件夹加载网站并调用 C# 函数并调用 JS 函数
Posted
技术标签:
【中文标题】WebView2 (WPF) - 从本地文件夹加载网站并调用 C# 函数并调用 JS 函数【英文标题】:WebView2 (WPF) - Load website from local folder and call C# Function and call JS Function 【发布时间】:2021-10-08 00:01:00 【问题描述】:我正在让 WPF 应用程序使用 WebView2。
将有一个安装程序,它将 WPF 应用程序安装在一个文件夹中,还将下载网站并将其写入安装目录的子文件夹中。比如这样:
Installation Directory
├───Website
│ ├───index.css
│ └───index.html
└───WPF Self Contained EXE
WebView2 将使用这个(我认为)加载网站:webView.CoreWebView2.Navigate(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Website");
这应该加载index.html
以及它引用的所有文件,例如index.css
。
现在我主要关心的是如何从 C# 调用 javascript 函数。到目前为止,在谷歌搜索之后,我只找到了 WebView1 的方法。而且我找不到任何关于从 JavaScript 调用 C# 方法的信息。
所以三件事:
webView.CoreWebView2.Navigate(Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "Website");
是否适合从本地文件夹加载网站?
如何调用 JavaScript 函数并将 C# 对象从 C# 方法传递给它。
如何从 JavaScript 脚本调用 C# 函数?
这可能吗?
谢谢。
【问题讨论】:
以下内容应该可以帮助您入门:***.com/questions/68578936/…、***.com/questions/65452473/… 和 ***.com/questions/68350635/…。但是,与其将文件(.html 和 .css)存储为嵌入式资源(如那些帖子中所示),不如将它们作为文件存储在磁盘上 - 正如您已经计划的那样。 谢谢!这有帮助!我认为将文件存储在磁盘上会使更新速度更快,因为它们可能会比实际应用程序更新得更快......再次感谢! 以下内容可能对如何从 JavaScript 调用 C# 函数有所帮助:github.com/MicrosoftEdge/WebView2Feedback/issues/335 【参考方案1】:使用文件 URI
我不确定 AppDomain.CurrentDomain.BaseDirectory 是否总能为您提供正确的路径。您可以使用以下内容:
string exePath = System.Reflection.Assembly.GetExecutingAssembly().Location;
string exeFolder = System.IO.Path.GetDirectoryName(exePath);
string websiteFolder = Path.Combine(exeFolder, "website");
string htmlPath = Path.Combine(websiteFolder, "index.html");
webView.CoreWebView2.Navigate(htmlPath);
您必须包含 index.html 本身的路径,而不仅仅是包含 index.html 的文件夹。
通常 Navigate 应该采用 URI,但如果您提供 Windows 文件路径,它会为您将其转换为文件 URI 并且应该可以工作。
在尝试合并 http(s) URI 和其他需要 https 的 Web 平台功能时,文件 URI 有一些限制。
使用虚拟 HTTPS URI
如果您使用文件 URI 遇到问题,您可以使用 CoreWebView2.SetVirtualHostNameToFolderMapping 将 Windows 文件路径映射到虚假 HTTPS 主机名:
string exePath = System.Reflection.Assembly.GetExecutingAssembly().Location;
string exeFolder = System.IO.Path.GetDirectoryName(exePath);
string websiteFolder = Path.Combine(exeFolder, "website");
webView.CoreWebView2.SetVirtualHostNameToFolderMapping("appassets.example", websiteFolder, CoreWebView2HostResourceAccessKind.DenyCors);
webView.CoreWebView2.Navigate("https://appassets.example/index.html");
这将创建一个虚假的主机名“appassets.example”,该主机名将映射到您的 Windows 文件路径。而且由于它的 HTTPS URI,您不会遇到与文件 URI 相同的问题。
脚本中的宿主对象
对于您的问题 2 和 3,您可以使用 CoreWebView2.AddHostObjectToScript。 AddHostObjectToScript 的当前实现需要对您的 C# 类进行特殊标记。您可以在 AddHostObjectToScript 文档中看到它。
【讨论】:
嗨。本地网站有效!谢谢!当我在返回 Listconst transaction = chrome.webview.hostObjects.transaction; transaction.GetReceiptItems(10).then(TResult1 => this.amount = TResult1.Count;);
Uncaught (in promise) TypeError: Cannot read property 'Count' of null
注意我正在使用 react.js。
GetReceiptItems 的结果类型是否也标注了相应的属性[ClassInterface(ClassInterfaceType.AutoDual)]
和[ComVisible(true)]
?
MS 网站上的 JavaScript 代码不正确。 const transaction = chrome.webview.hostObjects.transaction;
需要有 await
。应该是const transaction = await chrome.webview.hostObjects.transaction;
好的。谢谢!让我试试新代码。结果是 List以上是关于WebView2 (WPF) - 从本地文件夹加载网站并调用 C# 函数并调用 JS 函数的主要内容,如果未能解决你的问题,请参考以下文章
使用 WebVIew2 (Windows) 在当前目录中加载本地 HTML 文件
Wpf.Webview2.CoreWebview2.get 返回 null。对象引用未设置为对象的实例
Microsoft Edge WebView2 控件可以在显示之前预加载页面吗?