winforms 如何在WebView2加载的页面中插入额外的CSS?

zynd9foi  于 2023-03-03  发布在  其他
关注(0)|答案(1)|浏览(180)

我在winform中使用Webview2控件,一旦在浏览器控件中加载了特定的URL,我想注入额外的CSS来引入一个新的行为,即当鼠标悬停在加载页面中的任何元素上时添加背景颜色。

*:hover {
    background-color: #205081 !important;
}

如何将此样式代码注入到当前加载的URL文档中?
我可以通过使用下面的Javascript功能来完成同样的任务,但是无法通过CSS运行它。任何指针都将不胜感激。

string jsHoverScript = File.ReadAllText("hoverStyle.js");
 await webBrowser.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(jsHoverScript);
h9a6wy2h

h9a6wy2h1#

根据文件:
AddScriptToExecuteOnDocumentCreatedAsync将提供的JavaScript添加到脚本列表中,这些脚本应在创建全局对象之后、解析HTML文档之前以及运行HTML文档包含的任何其他脚本之前运行。
当你的脚本被执行时,DOM树还没有被解析,所以css编辑不起作用。你需要确保你的脚本在DOM树被解析后才执行。

  • 选项1

在javascript中使用window.addEventListener来确保在解析DOM树之后执行您的 * 真实的 * 代码。

window.addEventListener('load', 
  function() { 
    // your real logics here
  }, false
);
  • 备选方案2

使用事件CoreWebView2.DOMContentLoaded或其他替代方法来确保C#代码在解析DOM内容之后执行,然后使用CoreWebView2.ExecuteScriptAsync来执行真实的的逻辑
单据链接:
https://learn.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2.addscripttoexecuteondocumentcreatedasync?view=webview2-dotnet-1.0.1587.40
https://learn.microsoft.com/en-us/dotnet/api/microsoft.web.webview2.core.corewebview2.domcontentloaded?view=webview2-dotnet-1.0.1587.40
浏览器名称:webview 2-dotnet-1.0.1587.40 #微软网页视图2-核心网页视图2-执行脚本同步(系统字符串)

相关问题