.NET混合开发解决方案10 WebView2控件调用网页JS方法
WebView2控件应用详解系列博客
.NET混合开发解决方案2 WebView2与Edge浏览器的区别
.NET混合开发解决方案5 WebView2运行时与分发应用
.NET混合开发解决方案7 WinForm程序中通过NuGet管理器引用集成WebView2控件
.NET混合开发解决方案8 WinForm程序中通过设置固定版本运行时的BrowserExecutableFolder属性集成WebView2控件
客户端程序(WinForm、WPF、Win32、WinUI)集成WebView控件加载Web完成后,还有两种常见的需求
- C#调用JS方法
- 执行通用方法,设置网页特效。
- 调用网页中定义的JS方法,执行计算等。
- JS调用C#方法
本文讲解第一种需求的实现方式。
WebView2控件提供了2个方法用于执行JavaScript脚本
- ExecuteScriptAsync
- 在 WebView2 控件中运行 JavaScript。 加载页面文档对象模型(DOM)内容或完成导航后调用此方法。
- AddScriptToExecuteOnDocumentCreatedAsync
- 创建 DOM 时,在每个页面上运行。 初始化 CoreWebView2 后调用此方法。
由于ExecuteScriptAsync()的结果是JSON编码的,所以如果计算JavaScript的结果是一个字符串,那么将收到一个JSON编码的字符串,而不是字符串的值。例如,以下代码执行导致字符串的脚本。 生成的字符串包括开头的引号、末尾的引号和转义斜杠:
如果从脚本调用 JSON.stringify
,则结果将作为 JSON 字符串进行双重编码,其值为 JSON 字符串。
只有直接在结果中的属性包含在 JSON 编码的对象中;继承的属性不包括在 JSON 编码的对象中。 大多数 DOM 对象继承所有属性,因此需要将它们的值显式复制到另一个对象中才能返回。 例如:
执行 performance.memory
返回时由于所有属性都是继承的,因此在结果中看不到其任何属性。
如果改为将特定属性值从 performance.memory
复制到自己的新对象中返回,则会在结果中看到这些属性。
(() => { const {totalJSHeapSize, usedJSHeapSize} = performance.memory; return {totalJSHeapSize, usedJSHeapSize}; })();
通过 ExecuteScriptAsync()
执行脚本时,会在全局上下文中运行。 将脚本置于匿名函数中有助于使定义的任何变量不会污染全局上下文。
如果将js的逻辑写在字符串中,相对来说写的时候比较困难,如没有语法提示、逻辑检查等,因此很难在Visual Studio中编写大量代码。若要解决此问题,请使用代码创建单独的 JavaScript 文件,然后使用参数传递对该文件的 ExecuteScriptAsync
引用。
1、在项目中创建JS文件,并添加要运行的 JavaScript 代码。如 script.js。
2、将 JavaScript 文件转换为传递到 ExecuteScriptAsync
的字符串,方法是在页面导航完成后粘贴以下代码:
string text = System.IO.File.ReadAllText(@"C:\XXXX\script.js");
3、使用以下方法 ExecuteScriptAsync
传递文本变量:
await webView.CoreWebView2.ExecuteScriptAsync(text);
1、新建一个WebFom项目
调整页面逻辑
运行程序并测试
WebView2调用JS方法的逻辑
WebView2控件加载网页后,如果将一个文件(如:script.js、script.txt等)拖拽到WebView2控件上,将自动执行文件,效果如下
可以通过webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync()方法运行脚本禁用拖拽功能
await webView.CoreWebView2.AddScriptToExecuteOnDocumentCreatedAsync(
"window.addEventListener('dragover',function(e){e.preventDefault();},false);" +
"window.addEventListener('drop',function(e){" +
"e.preventDefault();" +
"console.log(e.dataTransfer);" +
"console.log(e.dataTransfer.files[0])" +
"}, false);");
再次运行后,拖拽文件为WebView2控件上无任何反应,说明拖拽功能已被禁用
使用 webView2.CoreWebView2.ExecuteScriptAsync() 方法执行上述脚本同样可以达到相同的效果。
还可以执行脚本来禁用网页右键菜单功能
await webView.CoreWebView2.ExecuteScriptAsync("window.addEventListener('contextmenu', window => {window.preventDefault();});");
开发者还可以执行其他自定义脚本来设置网页的效果。
.NET混合开发解决方案10 WebView2控件调用网页JS方法的更多相关文章
- .NET混合开发解决方案15 WebView2控件集成到WinForm程序编译后的文件及结构说明
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- .NET混合开发解决方案9 WebView2控件的导航事件
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- .NET混合开发解决方案11 WebView2加载的网页中JS调用C#方法
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- .NET混合开发解决方案14 WebView2的基本身份验证
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- .NET混合开发解决方案24 WebView2对比CefSharp的超强优势
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- 混合开发 webview 中file 控件 点击后无反应解决方法
最近在做个项目 ,需要 使用 file 控件上传 图片到服务器 ,在手机浏览器中 可以正常选择照片,但是放到 android 应用中的webview中,file 控件点击后就没有反应. 百度了一番后, ...
- .NET混合开发解决方案13 自定义WebView2中的上下文菜单
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- .NET混合开发解决方案16 管理WebView2的用户数据
系列目录 [已更新最新开发文章,点击查看详细] WebView2控件应用详解系列博客 .NET桌面程序集成Web网页开发的十种解决方案 .NET混合开发解决方案1 WebView2简介 .NE ...
- .NET混合开发解决方案5 WebView2运行时与分发应用
系列目录 [已更新最新开发文章,点击查看详细] 发布使用Microsoft Edge WebView2的应用程序时,客户端计算机上需要安装WebView2运行时,可以安装自动更新的Evergr ...
随机推荐
- Java 中应该使用什么数据类型来代表价格?
如果不是特别关心内存和性能的话,使用 BigDecimal,否则使用预定义精度的 double 类型.
- 爬虫-数据解析-xpath
xpath 解析 模块安装 : pip install lxml xpath的解析原理 实例化一个etree类型的对象,且将页面源码数据加载到该对象中 需要调用该对象的xpath方法结合着不同形式的x ...
- SringBoot之yaml语法
------------恢复内容开始------------ SpringBoot之yaml语法 1.配置文件 官方配置文档太多了,根本记不住! 怎么办呐-->了解原理 SpringBoot使用 ...
- 16_伯德图_手绘技巧与应用_Bode Plot_Part2
- 让弹幕给 PPD 生个孩子
怎样才能跑起来我写的弹幕程序 资源下载 申请野狗后端云账号注册 创建应用: 复制appId到index.html的 var ref = new Wilddog("https://<ap ...
- python爬虫---爬取王者荣耀全部皮肤图片
代码: import requests json_headers = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win ...
- CCF201709-2公共钥匙盒改进版
问题描述 有一个学校的老师共用N个教室,按照规定,所有的钥匙都必须放在公共钥匙盒里,老师不能带钥匙回家.每次老师上课前,都从公共钥匙盒里找到自己上课的教室的钥匙去开门,上完课后,再将钥匙放回到钥匙盒中 ...
- MySQL 中 SQL语句大全(详细)
sql语句总结 总结内容 1. 基本概念 2. SQL列的常用类型 3. DDL简单操作 3.1 数据库操作 3.2 表操作 4. DML操作 4.1 修改操作(UPDATE SET) 4.2 插入操 ...
- Centos搭建 Git 服务器教程
搭建 GIT 服务器教程 下载安装 git Git 是一款免费.开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目. 此实验以 CentOS 7.2 x64 的系统为环境,搭建 git 服 ...
- BootstrapBlazor实战 Chart 图表使用(1)
BootstrapBlazor组件 Chart 图表介绍 通过给定数据,绘画各种图表的组件 本文主要介绍三种图表使用:折线图,柱状图,饼图 1.新建工程 新建工程b06chart,使用 nuget.o ...