RAD Studio 10.4.1新的基于Chromium的Microsoft Edge浏览器的TEdgeBrowser控件用法

原创

已于 2022-02-17 21:58:11 修改 · 置顶 · 8.9k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#Studio 10.4.1 #delphi 10.4.1 #Chromium #MicrosoftEdge #TEdgeBrowser

于 2020-11-20 19:08:00 首次发布

本文介绍了RADStudio 10.4.1中TEdgeBrowser控件的安装与使用方法，包括环境配置、基本浏览功能及与JavaScript交互等内容。

RAD Studio 10.4.1新的基于Chromium的Microsoft Edge浏览器的TEdgeBrowser控件用法

一、TEdgeBrowser安装部署说明

1.1、TEdgeBrowser的使用环境安装

1.2、TEdgeBrowser所的依赖的动态链接库的安装

二、delphi 10.4.1下TEdgeBrowser的使用

1、很简单的浏览应用

1.1、输出内容与介绍：

1.2、代码如下：

1.3、运行效果（再也不想TWebbrowser那样不支持Bootstrap响应了）

2、与JavaScript交互

2、《Delphi Restful之客户端javascript与中间件服务器交互》

3、microsoft-edge开发工具之网络工具的使用

网络功能参考 - Microsoft Edge Development | Microsoft Docs

喜欢的话，就在下面点个赞、收藏就好了，方便看下次的分享：

RAD Studio 10.4.1新的基于Chromium的Microsoft Edge浏览器的TEdgeBrowser控件用法

一、TEdgeBrowser安装部署说明

1.1、TEdgeBrowser的使用环境安装

TWebBrowser使用Win10之前的操作系统提供的IE浏览器; 只要Windows上安装有IE，它就可以工作。
Microsoft Edge当时还并不是操作系统组件一部分。因此需要在计算机上安装后才能使用.
从https://www.MicrosoftEdgeInsider.com/cn/download下载的基于Chromium的Microsoft Edge浏览器（Canary渠道版本WebView2 SDK、Dev渠道版本）。
WebView2控件，当前可通过https://www.nuget.org/packages/Microsoft.Web.WebView2上的NuGet或通过GetIt程序包管理器获得
若未能安装，请用我下面的百度版本:
链接：百度网盘请输入提取码
提取码：8191
复制这段内容后打开百度网盘--来自百度网盘V6超级会员Karma的分享

（请参考： https://github.com/webview/webview/tree/master/dll/x86）

安装后，Windows 64位注册表信息：

HKEY_LOCAL_MACHINE\SOFTWARE\Classes\Applications\msedge.exe\shell\open\command

"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --single-argument %1

可用此Shell命令直接打开某网站：
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" www.cpuofbs.com

1.2、TEdgeBrowser所的依赖的动态链接库的安装

安装后，TEdgeBrowser将起作用,其控件才会在UI中呈现Web内容:

1、安装：需要将WebView2的微软安装包：64位、32位
2、安装：微软Edge浏览器的开发版本：MicrosoftEdgeDev
3、将分x86和x64：WebView2Loader.dll文件，分别拷贝到：C:\Windows\System32和C:\Windows\SysWOW64
4、安装一下3、中文件（我安装的x86）：
regsvr32 /i WebView2Loader.dll
5、复制文件：
将4、中的x86的两个文件复制到：[Delphi10.4Update1安装文件夹]\bin\ 下。

运行时：将其复制到可执行文件目录（常识）。

二、delphi 10.4.1下TEdgeBrowser的使用

1、很简单的浏览应用

Chrome DevTools Protocol - latest (tip-of-tree)

https://chromium.googlesource.com/chromium/src/+log/master/third_party/blink/renderer/core/inspector/browser_protocol.json

1.1、输出内容与介绍：


默认开始初始化(UI设计时的)EdgeBrowser1或初始化动态产生的TEdgeBrowser
LICoreWebView2接口TGUID:{189B8AAF-0426-4748-B9AD-243F537EB46B}
EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用>0的,否则访问的是其基础进程ID(0):0
窗体加载TEdgeBrowser组件时就完成了WebView2组件的初始化

必须EdgeBrowser1.WebViewCreated,否则接口调用报错!
有这样一些接口:
DefaultInterface: ICoreWebView2
ControllerInterface: ICoreWebView2Controller
EnvironmentInterface: ICoreWebView2Environment
SettingsInterface: ICoreWebView2Settings

TEdgeBrowser:支持异步产生WebView控件：
有这样一些方法:
TEdgeBrowser.CreateWebView
TEdgeBrowser.CloseWebView
TEdgeBrowser.CloseBrowserProcess

EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用:12504

TEdgeBrowser需要初始化一些参数,以使一些方法或接口生效:

    EdgeBrowser1.BuiltInErrorPageEnabled :=true; //:替代了浏览器内部错误提示
    EdgeBrowser1.ZoomControlEnabled :=true; //:控制用户是否可以影响WebView的缩放
    EdgeBrowser1.DevToolsEn