Winforms .NET 6环境下WebView2如何向当前页面注入jQuery库?
WebView2 注入 jQuery 实现方案
完全可以实现,不需要目标页面做任何适配,直接注入jQuery源码到页面上下文即可,具体操作如下:
- 提前下载jQuery压缩版(min版)源码,保存到你的WinForms项目中,可作为内嵌资源或本地文本文件存放,程序启动时将源码读取为字符串备用。
- 确保WebView2控件完成核心初始化,建议在
CoreWebView2InitializationCompleted事件触发后再执行注入逻辑,避免CoreWebView2为空报错。 - 监听WebView2的
NavigationCompleted事件,每次目标页面加载完成后,先调用ExecuteScriptAsync注入jQuery源码:
// jqueryMinStr为提前读取的jQuery压缩版完整源码字符串 await webView21.CoreWebView2.ExecuteScriptAsync(jqueryMinStr);
- 注入完成后,后续所有通过
ExecuteScriptAsync执行的脚本都可以直接使用$/jQuery对象操作DOM、绑定事件,示例:
await webView21.CoreWebView2.ExecuteScriptAsync(@" // 给页面所有a标签添加点击监听 $('a').on('click', function(e) { console.log('拦截到链接点击:', $(this).attr('href')); }); ");
注意事项
- 页面刷新或导航到新页面后,之前注入的jQuery会丢失,将注入逻辑放在
NavigationCompleted事件中即可实现每次加载新页面自动注入,无需手动重复调用。 - 如果目标页面本身已引入jQuery,重复注入不会触发异常,你也可以在注入后执行
const customJq = jQuery.noConflict(true)自定义jQuery变量名,完全避免和页面原有全局变量冲突。
内容的提问来源于stack exchange,提问作者Atchoum
相关产品推荐
相关产品推荐

