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

2024-04-02 04:36:45

目录

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交互

附：本博客相关博文：

1、《RAD Studio 10.4.1的TEdgeBrowser与javascript交互-基于Chromium的Edge浏览器控件用法之二》

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: ICoreWebView2SettingsTEdgeBrowser:支持异步产生WebView控件：
有这样一些方法:
TEdgeBrowser.CreateWebView
TEdgeBrowser.CloseWebView
TEdgeBrowser.CloseBrowserProcessEdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用:12504TEdgeBrowser需要初始化一些参数,以使一些方法或接口生效:EdgeBrowser1.BuiltInErrorPageEnabled :=true; //:替代了浏览器内部错误提示EdgeBrowser1.ZoomControlEnabled :=true; //:控制用户是否可以影响WebView的缩放EdgeBrowser1.DevToolsEnabled :=true; //:控制用户是否能够使用上下文菜单或键盘快捷键打开DevTools窗口EdgeBrowser1.StatusBarEnabled :=false;//:控制是否显示状态栏EdgeBrowser1.DefaultContextMenusEnabled :=true;//:控制是否在WebView中向用户显示默认上下文菜单//:若false:则网页代码中所有涉及Menu的事件将被屏蔽
{EdgeBrowser1.DefaultScriptDialogsEnabled :=true;//:控制在显示JavaScript对话框时是否启动OnScriptDialogOpeningEdgeBrowser1.ScriptEnabled :=true;//:控制是否在以后的所有导航视图中启用JavaScript的执行//:特别注意:这两个属性:只要引用无论false或true,//,网页下载的原生js将不在生效:由代码控制
//}
EdgeBrowser1.WebMessageEnabled :=true;开始访问TEdgeBrowser的接口对象0
调用JavaScript也是类似的方式ExecuteScript()成功浏览网页TEdgeBrowser组件在执行Navigate时,触发开始浏览网页！TEdgeBrowser组件NavigationID:2,SizeRatio1
:正在调取页面内容https://www.cpuofbs.com/main.htmlTEdgeBrowser组件CapturePreview输出呈现部分的图片:CapturePreview01.png ,AResult=0

1.2、代码如下：

unit uEdgeBrowser01;interfaceusesWinapi.Windows, Winapi.Messages,System.SysUtils, System.Variants, System.Classes,Vcl.Graphics,Vcl.Controls, Vcl.Forms, Vcl.Dialogs,WebView2,Winapi.ActiveX, Vcl.Edge, Vcl.StdCtrls, Vcl.Buttons, Vcl.ExtCtrls;typeTForm_EdgeBrowser01 = class(TForm)EdgeBrowser1: TEdgeBrowser;Panel1: TPanel;BitBtn_Navigate: TBitBtn;Panel2: TPanel;Memo1: TMemo;BitBtn_CapturePreview: TBitBtn;procedure BitBtn_NavigateClick(Sender: TObject);procedure EdgeBrowser1NavigationStarting(Sender: TCustomEdgeBrowser;Args: TNavigationStartingEventArgs);procedure EdgeBrowser1ContentLoading(Sender: TCustomEdgeBrowser;IsErrorPage: Boolean; NavigationID: TUInt64);procedure EdgeBrowser1CreateWebViewCompleted(Sender: TCustomEdgeBrowser;AResult: HRESULT);procedure EdgeBrowser1CapturePreviewCompleted(Sender: TCustomEdgeBrowser;AResult: HRESULT);procedure BitBtn_CapturePreviewClick(Sender: TObject);procedure FormCreate(Sender: TObject);procedure FormShow(Sender: TObject);private{ Private declarations }public{ Public declarations }end;varForm_EdgeBrowser01: TForm_EdgeBrowser01;implementation{$R *.dfm}procedure TForm_EdgeBrowser01.FormCreate(Sender: TObject);
var LICoreWebView2:ICoreWebView2;
beginMemo1.Lines.Add('默认开始初始化(UI设计时的)EdgeBrowser1或初始化动态产生的TEdgeBrowser');GetInterface( StringToGUID('{189B8AAF-0426-4748-B9AD-243F537EB46B}'),LICoreWebView2);if LICoreWebView2 = EdgeBrowser1.DefaultInterface thenMemo1.Lines.Add('LICoreWebView2接口TGUID:'+'{189B8AAF-0426-4748-B9AD-243F537EB46B}' );//GUIDToString StringToGUID
end;procedure TForm_EdgeBrowser01.FormShow(Sender: TObject);
beginMemo1.Lines.Add('EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用>0的,否则访问的是其基础进程ID(0):'+EdgeBrowser1.BrowserProcessID.ToString );
end;procedure TForm_EdgeBrowser01.BitBtn_NavigateClick(Sender: TObject);
var LHResult_PostWebMessage:HResult;
beginif EdgeBrowser1.WebViewCreated then//:必须的,否则接口调用报错:beginMemo1.Lines.Add('必须EdgeBrowser1.WebViewCreated,否则接口调用报错!'+sLineBreak+'有这样一些接口:'+sLineBreak+'DefaultInterface: ICoreWebView2'+sLineBreak+'ControllerInterface: ICoreWebView2Controller'+sLineBreak+'EnvironmentInterface: ICoreWebView2Environment'+sLineBreak+'SettingsInterface: ICoreWebView2Settings'+sLineBreak);Memo1.Lines.Add('TEdgeBrowser:支持异步产生WebView控件：'+sLineBreak+'有这样一些方法:'+sLineBreak+'TEdgeBrowser.CreateWebView'+sLineBreak+'TEdgeBrowser.CloseWebView'+sLineBreak+'TEdgeBrowser.CloseBrowserProcess'+sLineBreak);Memo1.Lines.Add('EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用:'+EdgeBrowser1.BrowserProcessID.ToString +sLineBreak );Memo1.Lines.Add('TEdgeBrowser需要初始化一些参数,以使一些方法或接口生效:' +sLineBreak+'EdgeBrowser1.BuiltInErrorPageEnabled :=true;' +sLineBreak+'EdgeBrowser1.DefaultContextMenusEnabled :=true;' +sLineBreak+'EdgeBrowser1.ZoomControlEnabled :=true;' +sLineBreak+'EdgeBrowser1.StatusBarEnabled :=true;' +sLineBreak+'EdgeBrowser1.DevToolsEnabled :=true;' +sLineBreak+'EdgeBrowser1.DefaultScriptDialogsEnabled :=true;' +sLineBreak+'EdgeBrowser1.ScriptEnabled :=true;' +sLineBreak+'EdgeBrowser1.WebMessageEnabled :=true;' +sLineBreak);EdgeBrowser1.BuiltInErrorPageEnabled :=true; //:替代了浏览器内部错误提示EdgeBrowser1.ZoomControlEnabled :=true; //:控制用户是否可以影响WebView的缩放EdgeBrowser1.DevToolsEnabled :=true; //:控制用户是否能够使用上下文菜单或键盘快捷键打开DevTools窗口EdgeBrowser1.StatusBarEnabled :=false;//:控制是否显示状态栏EdgeBrowser1.DefaultContextMenusEnabled :=true;//:控制是否在WebView中向用户显示默认上下文菜单//:若false:则网页代码中所有涉及Menu的事件将被屏蔽
{EdgeBrowser1.DefaultScriptDialogsEnabled :=true;//:控制在显示JavaScript对话框时是否启动OnScriptDialogOpeningEdgeBrowser1.ScriptEnabled :=true;//:控制是否在以后的所有导航视图中启用JavaScript的执行//:特别注意:这两个属性:只要引用无论false或true,//,网页下载的原生js将不在生效:由代码控制
//}EdgeBrowser1.WebMessageEnabled :=true;//:必须的,否则接口PostWebMessageAsString调用报错:LHResult_PostWebMessage:=EdgeBrowser1.DefaultInterface.PostWebMessageAsString(PWideChar('{ICoreWebView2:true}') ) ;//:0接口函数执行成功 -1失败if LHResult_PostWebMessage> -1 thenMemo1.Lines.Add('开始访问TEdgeBrowser的接口对象'+IntToStr(LHResult_PostWebMessage) +sLineBreak+'调用JavaScript也是类似的方式ExecuteScript()' +sLineBreak);//:开始访问TEdgeBrowser的接口对象TThread.CreateAnonymousThread(procedurebeginTThread.Synchronize( nil,procedure //var AHTMLContent: string;begin//EdgeBrowser1.NavigateToString(AHTMLContent);if EdgeBrowser1.Navigate( //:Navigate:如果返回了错误码:=true,否则:=false'https://www.cpuofbs.com/main.html' )=false thenMemo1.Lines.Add('成功浏览网页' +sLineBreak );end);end).Start;end;
end;procedure TForm_EdgeBrowser01.EdgeBrowser1ContentLoading(Sender: TCustomEdgeBrowser; IsErrorPage: Boolean; NavigationID: TUInt64);
beginMemo1.Lines.Add('TEdgeBrowser组件NavigationID:'+IntToStr(NavigationID)+',SizeRatio'+EdgeBrowser1.SizeRatio.ToString +sLineBreak+':正在调取页面内容'+EdgeBrowser1.LocationURL +sLineBreak);
end;procedure TForm_EdgeBrowser01.EdgeBrowser1CreateWebViewCompleted(Sender: TCustomEdgeBrowser; AResult: HRESULT);
beginMemo1.Lines.Add('窗体加载TEdgeBrowser组件时就完成了WebView2组件的初始化'+sLineBreak );
end;procedure TForm_EdgeBrowser01.EdgeBrowser1NavigationStarting(Sender: TCustomEdgeBrowser; Args: TNavigationStartingEventArgs);
beginMemo1.Lines.Add('TEdgeBrowser组件在执行Navigate时,触发开始浏览网页！'+sLineBreak );
end;procedure TForm_EdgeBrowser01.BitBtn_CapturePreviewClick(Sender: TObject);
beginif EdgeBrowser1.WebViewCreated thenbeginEdgeBrowser1.ZoomFactor:=100/100;EdgeBrowser1.CapturePreview(System.SysUtils.ExtractFilePath(System.ParamStr(0))+'CapturePreview01.png',PNG);end;end;procedure TForm_EdgeBrowser01.EdgeBrowser1CapturePreviewCompleted(Sender: TCustomEdgeBrowser; AResult: HRESULT);
beginMemo1.Lines.Add('TEdgeBrowser组件CapturePreview输出呈现部分的图片:CapturePreview01.png ,AResult='+IntToStr(AResult)+sLineBreak );
end;end.

object Form_EdgeBrowser01: TForm_EdgeBrowser01Left = 0Top = 0Caption = 'TEdgeBrowser'#24212#29992'01'ClientHeight = 563ClientWidth = 533Color = clBtnFaceFont.Charset = DEFAULT_CHARSETFont.Color = clWindowTextFont.Height = -11Font.Name = 'Tahoma'Font.Style = []OldCreateOrder = FalseOnCreate = FormCreateOnShow = FormShowPixelsPerInch = 96TextHeight = 13object Panel1: TPanelLeft = 0Top = 503Width = 533Height = 60Align = alBottomTabOrder = 0ExplicitTop = 522object BitBtn_Navigate: TBitBtnLeft = 40Top = 6Width = 73Height = 43Caption = #27983#35272#32593#39029Font.Charset = GB2312_CHARSETFont.Color = clWindowTextFont.Height = -13Font.Name = #24494#36719#38597#40657Font.Style = []ParentFont = FalseTabOrder = 0OnClick = BitBtn_NavigateClickendobject BitBtn_CapturePreview: TBitBtnLeft = 128Top = 6Width = 137Height = 43Caption = #25429#33719#21576#29616#20869#23481#20026#22270#29255Font.Charset = GB2312_CHARSETFont.Color = clWindowTextFont.Height = -13Font.Name = #24494#36719#38597#40657Font.Style = []ParentFont = FalseTabOrder = 1OnClick = BitBtn_CapturePreviewClickendendobject Panel2: TPanelLeft = 0Top = 0Width = 533Height = 503Align = alClientCaption = 'Panel2'TabOrder = 1ExplicitWidth = 704ExplicitHeight = 522object EdgeBrowser1: TEdgeBrowserLeft = 1Top = 345Width = 531Height = 157Align = alClientTabOrder = 0OnCapturePreviewCompleted = EdgeBrowser1CapturePreviewCompletedOnContentLoading = EdgeBrowser1ContentLoadingOnCreateWebViewCompleted = EdgeBrowser1CreateWebViewCompletedOnNavigationStarting = EdgeBrowser1NavigationStartingExplicitTop = 312ExplicitHeight = 190endobject Memo1: TMemoLeft = 1Top = 1Width = 531Height = 344Align = alTopLines.Strings = ('Memo1')ScrollBars = ssVerticalTabOrder = 1endend
end

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

2、与JavaScript交互

详见下篇继续分享：

附：本博客相关博文：

1、《RAD Studio 10.4.1的TEdgeBrowser与javascript交互-基于Chromium的Edge浏览器控件用法之二》

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

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

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

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

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

微软发布首版基于 Chromium 79 的 Edge 浏览器
根据 softpedia 报道,微软正式发布第一个版基于 Chromium 79 的 Edge 浏览器. 在最近的更新中, Microsoft Edge Canary 版本升级到了 79.0.278. ...
基于Linux的Microsoft Edge浏览器
关于Edge 近年来随着浏览器市场的变革,IE的地位越来越低,终于微软在Windows 10操作系统中推出了全新的Edge浏览器,但是在刚开始的阶段Edge浏览器并不友好,很多人都无法适应Edge的工 ...
RAD Studio 10.4.1 Sydney 新增与改进内容介绍
RAD Studio 10.4 Sydney-Release 1(也就是10.4.1).10.4.1基于10.4的功能集,增强了整个产品中的现有功能,并添加了新功能.可以将Delphi 10.4.1, ...
Delphi RAD Studio 10.4.2 Sydney的新增与改进介绍（上）
2021年2月24日发布RAD Studio 10.4.2 Sydney的更新版本. 10.4.2建立在10.4和10.4.1的功能集的基础上,增强了整个产品中的现有功能,并添加了新功能.RAD St ...
Delphi RAD Studio 10.4 Sydney 新增和改进的功能简介
RAD Studio 10.4 Sydney版本已经发布,主要有发下新增和改进功能: Delphi的新功能 Delphi Code Insight的重大改进据官方说,RAD Studio 10.4是 ...
使用RAD Studio 10 Seattle创建自定义按钮样式
在RAD Studio 10 Seattle中,我们对IDE中的集成样式设计器进行了许多增强.在今天的帖子中,我想我将介绍使用RAD Studio 10 Seattle创建自己的自定义按钮样式的步骤. ...
Embarcadero推出RAD Studio 10.3.1
一如我的猜测, Embarcadero选择在2月14日这个对Delphi最具意义的日子推出10.3的第1个更新版 10.3.1. 10.3.1在定义上是属于质量更新版, 这是说10.3.1最重要的功能 ...
RAD Studio 10.4 for delphi XE Assigned和Nil的联系与区别
RAD Studio 10.4 for delphi XE Assigned和Nil的联系与区别一.原理系统级别的函数System.pas : System.Assignedfunction As ...
Delphi RAD Studio 10.4.2 Sydney的新增与改进介绍原版全文
Delphi RAD Studio 10.4.2 Sydney的新增与改进介绍原版全文 1.What's New in RAD Studio 10.4.2---------10.4.2有何改变 Wha ...

最新文章

热门文章