目录
RAD Studio 10.4.1新的基于Chromium的Microsoft Edge浏览器的TEdgeBrowser控件用法
二、delphi 10.4.1下TEdgeBrowser的使用
1.3、运行效果(再也不想TWebbrowser那样不支持Bootstrap响应了)
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程序包管理器获得
若未能安装,请用我下面的百度版本:
链接:https://pan.baidu.com/s/16U7t-yRMHaz19cO0m6rgJg
提取码:8191
复制这段内容后打开百度网盘--来自百度网盘V6超级会员Karma的分享
(请参考: https://github.com/webview/webview/tree/master/dll/x86)
1.2、TEdgeBrowser所的依赖的动态链接库的安装
安装后,TEdgeBrowser将起作用,其控件才会在UI中呈现Web内容:
1、安装:需要将WebView2的微软安装包:64位、32位
2、安装:微软Edge浏览器的开发版本:MicrosoftEdgeDev
3、将分x86和x64:webview.dll和WebView2Loader.dll的两组文件,分别拷贝到:C:\Windows\System32和C:\Windows\SysWOW64
4、安装一下3、中两个文件(我安装的x86) :
regsvr32 /i WebView2Loader.dll
regsvr32 /i webview.dll
5、复制文件:
将4、中的x86的两个文件复制到:[Delphi10.4Update1安装文件夹]\bin\ 下。
二、delphi 10.4.1下TEdgeBrowser的使用
1、很简单的浏览应用
https://chromedevtools.github.io/devtools-protocol/tot/
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.DevToolsEnabled :=true; //:控制用户是否能够使用上下文菜单或键盘快捷键打开DevTools窗口
EdgeBrowser1.StatusBarEnabled :=false;//:控制是否显示状态栏
EdgeBrowser1.DefaultContextMenusEnabled :=true;//:控制是否在WebView中向用户显示默认上下文菜单
//:若false:则网页代码中所有涉及Menu的事件将被屏蔽
{
EdgeBrowser1.DefaultScriptDialogsEnabled :=true;//:控制在显示JavaScript对话框时是否启动OnScriptDialogOpening
EdgeBrowser1.ScriptEnabled :=true;//:控制是否在以后的所有导航视图中启用JavaScript的执行
//:特别注意:这两个属性:只要引用无论false或true,
//,网页下载的原生js将不在生效:由代码控制
//}
EdgeBrowser1.WebMessageEnabled :=true;
开始访问TEdgeBrowser的接口对象0
调用JavaScript也是类似的方式ExecuteScript()
成功浏览网页
TEdgeBrowser组件在执行Navigate时,触发开始浏览网页!
TEdgeBrowser组件NavigationID:2,SizeRatio1
:正在调取页面内容https://www.cpuofbs.com/main.html
TEdgeBrowser组件CapturePreview输出呈现部分的图片:CapturePreview01.png ,AResult=0
1.2、代码如下:
unit uEdgeBrowser01;
interface
uses
Winapi.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;
type
TForm_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;
var
Form_EdgeBrowser01: TForm_EdgeBrowser01;
implementation
{$R *.dfm}
procedure TForm_EdgeBrowser01.FormCreate(Sender: TObject);
var LICoreWebView2:ICoreWebView2;
begin
Memo1.Lines.Add('默认开始初始化(UI设计时的)EdgeBrowser1或初始化动态产生的TEdgeBrowser');
GetInterface( StringToGUID('{189B8AAF-0426-4748-B9AD-243F537EB46B}'),LICoreWebView2);
if LICoreWebView2 = EdgeBrowser1.DefaultInterface then
Memo1.Lines.Add('LICoreWebView2接口TGUID:'+'{189B8AAF-0426-4748-B9AD-243F537EB46B}' );
//GUIDToString StringToGUID
end;
procedure TForm_EdgeBrowser01.FormShow(Sender: TObject);
begin
Memo1.Lines.Add('EdgeBrowser浏览器内部执行的进程ID必须放在其事件中取引用>0的,否则访问的是其基础进程ID(0):'
+EdgeBrowser1.BrowserProcessID.ToString );
end;
procedure TForm_EdgeBrowser01.BitBtn_NavigateClick(Sender: TObject);
var LHResult_PostWebMessage:HResult;
begin
if EdgeBrowser1.WebViewCreated then//:必须的,否则接口调用报错:
begin
Memo1.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对话框时是否启动OnScriptDialogOpening
EdgeBrowser1.ScriptEnabled :=true;//:控制是否在以后的所有导航视图中启用JavaScript的执行
//:特别注意:这两个属性:只要引用无论false或true,
//,网页下载的原生js将不在生效:由代码控制
//}
EdgeBrowser1.WebMessageEnabled :=true;//:必须的,否则接口PostWebMessageAsString调用报错:
LHResult_PostWebMessage
:=EdgeBrowser1.DefaultInterface.PostWebMessageAsString(
PWideChar('{ICoreWebView2:true}') ) ;//:0接口函数执行成功 -1失败
if LHResult_PostWebMessage> -1 then
Memo1.Lines.Add('开始访问TEdgeBrowser的接口对象'
+IntToStr(LHResult_PostWebMessage) +sLineBreak
+'调用JavaScript也是类似的方式ExecuteScript()' +sLineBreak
);
//:开始访问TEdgeBrowser的接口对象
TThread.CreateAnonymousThread(
procedure
begin
TThread.Synchronize( nil,
procedure //var AHTMLContent: string;
begin
//EdgeBrowser1.NavigateToString(AHTMLContent);
if EdgeBrowser1.Navigate( //:Navigate:如果返回了错误码:=true,否则:=false
'https://www.cpuofbs.com/main.html' )=false then
Memo1.Lines.Add('成功浏览网页' +sLineBreak );
end);
end
).Start;
end;
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1ContentLoading(
Sender: TCustomEdgeBrowser; IsErrorPage: Boolean; NavigationID: TUInt64);
begin
Memo1.Lines.Add('TEdgeBrowser组件NavigationID:'+IntToStr(NavigationID)
+',SizeRatio'+EdgeBrowser1.SizeRatio.ToString +sLineBreak
+':正在调取页面内容'+EdgeBrowser1.LocationURL +sLineBreak);
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1CreateWebViewCompleted(
Sender: TCustomEdgeBrowser; AResult: HRESULT);
begin
Memo1.Lines.Add('窗体加载TEdgeBrowser组件时就完成了WebView2组件的初始化'+sLineBreak );
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1NavigationStarting(
Sender: TCustomEdgeBrowser; Args: TNavigationStartingEventArgs);
begin
Memo1.Lines.Add('TEdgeBrowser组件在执行Navigate时,触发开始浏览网页!'+sLineBreak );
end;
procedure TForm_EdgeBrowser01.BitBtn_CapturePreviewClick(Sender: TObject);
begin
if EdgeBrowser1.WebViewCreated then
begin
EdgeBrowser1.ZoomFactor:=100/100;
EdgeBrowser1.CapturePreview(
System.SysUtils.ExtractFilePath(
System.ParamStr(0))+'CapturePreview01.png',PNG);
end;
end;
procedure TForm_EdgeBrowser01.EdgeBrowser1CapturePreviewCompleted(
Sender: TCustomEdgeBrowser; AResult: HRESULT);
begin
Memo1.Lines.Add('TEdgeBrowser组件CapturePreview输出呈现部分的图片:CapturePreview01.png ,AResult='+IntToStr(AResult)+sLineBreak );
end;
end.
object Form_EdgeBrowser01: TForm_EdgeBrowser01
Left = 0
Top = 0
Caption = 'TEdgeBrowser'#24212#29992'01'
ClientHeight = 563
ClientWidth = 533
Color = clBtnFace
Font.Charset = DEFAULT_CHARSET
Font.Color = clWindowText
Font.Height = -11
Font.Name = 'Tahoma'
Font.Style = []
OldCreateOrder = False
OnCreate = FormCreate
OnShow = FormShow
PixelsPerInch = 96
TextHeight = 13
object Panel1: TPanel
Left = 0
Top = 503
Width = 533
Height = 60
Align = alBottom
TabOrder = 0
ExplicitTop = 522
object BitBtn_Navigate: TBitBtn
Left = 40
Top = 6
Width = 73
Height = 43
Caption = #27983#35272#32593#39029
Font.Charset = GB2312_CHARSET
Font.Color = clWindowText
Font.Height = -13
Font.Name = #24494#36719#38597#40657
Font.Style = []
ParentFont = False
TabOrder = 0
OnClick = BitBtn_NavigateClick
end
object BitBtn_CapturePreview: TBitBtn
Left = 128
Top = 6
Width = 137
Height = 43
Caption = #25429#33719#21576#29616#20869#23481#20026#22270#29255
Font.Charset = GB2312_CHARSET
Font.Color = clWindowText
Font.Height = -13
Font.Name = #24494#36719#38597#40657
Font.Style = []
ParentFont = False
TabOrder = 1
OnClick = BitBtn_CapturePreviewClick
end
end
object Panel2: TPanel
Left = 0
Top = 0
Width = 533
Height = 503
Align = alClient
Caption = 'Panel2'
TabOrder = 1
ExplicitWidth = 704
ExplicitHeight = 522
object EdgeBrowser1: TEdgeBrowser
Left = 1
Top = 345
Width = 531
Height = 157
Align = alClient
TabOrder = 0
OnCapturePreviewCompleted = EdgeBrowser1CapturePreviewCompleted
OnContentLoading = EdgeBrowser1ContentLoading
OnCreateWebViewCompleted = EdgeBrowser1CreateWebViewCompleted
OnNavigationStarting = EdgeBrowser1NavigationStarting
ExplicitTop = 312
ExplicitHeight = 190
end
object Memo1: TMemo
Left = 1
Top = 1
Width = 531
Height = 344
Align = alTop
Lines.Strings = (
'Memo1')
ScrollBars = ssVertical
TabOrder = 1
end
end
end
1.3、运行效果(再也不想TWebbrowser那样不支持Bootstrap响应了)
2、与JavaScript交互
详见下篇继续分享:
附:本博客相关博文:
1、《RAD Studio 10.4.1的TEdgeBrowser与javascript交互-基于Chromium的Edge浏览器控件用法之二》
2、《Delphi Restful之客户端javascript与中间件服务器交互》