RAD Studio 10.4.1 nuevo uso de control TEdgeBrowser del navegador Microsoft Edge basado en Chromium

1. Instrucciones de instalación e implementación de TEdgeBrowser

1.1, instalación del entorno de uso de TEdgeBrowser

TWebBrowser utiliza el navegador IE proporcionado por el sistema operativo antes de Win10; siempre que IE esté instalado en Windows, funcionará.
Microsoft Edge aún no formaba parte del componente del sistema operativo. Por lo tanto, debe instalarse en la computadora antes de que pueda usarse.
El navegador Microsoft Edge basado en Chromium (versión del canal Canary WebView2 SDK, versión del canal Dev) descargado de https://www.MicrosoftEdgeInsider.com/cn/download.
El control WebView2 está disponible actualmente a través de NuGet en https://www.nuget.org/packages/Microsoft.Web.WebView2 o mediante el administrador de paquetes GetIt.
Si no se instala, utilice mi versión de Baidu a continuación:
enlace: https : //pan.baidu.com/s/16U7t-yRMHaz19cO0m6rgJg
Código de extracción: 8191
Copie este contenido y abra Baidu Netdisk --Compartir de Baidu Netdisk V6 Super Member Karma

(Consulte: https://github.com/webview/webview/tree/master/dll/x86 )

1.2. Instalación de la biblioteca de vínculos dinámicos en la que se basa TEdgeBrowser

Después de la instalación, TEdgeBrowser funcionará y sus controles mostrarán contenido web en la interfaz de usuario:

1. Instalación: es necesario instalar el paquete de instalación de Microsoft de WebView2: 64 bits, 32 bits
2. Instalación: versión de desarrollo del navegador Microsoft Edge: MicrosoftEdgeDev
3. Se dividirá en dos conjuntos de archivos, x86 y x64: webview.dll y WebView2Loader.dll, Cópielos en: C: \ Windows \ System32 y C: \ Windows \ SysWOW64
4. Instale los siguientes 3. Dos archivos (x86 que instalé):
regsvr32 / i WebView2Loader.dll
regsvr32 / i webview.dll
5. Copie los archivos :
Copie los dos archivos x86 en 4. en: [carpeta de instalación Delphi10.4Update1] \ bin \.

En segundo lugar, el uso de TEdgeBrowser bajo delphi 10.4.1

1. Aplicación de navegación muy sencilla

https://chromedevtools.github.io/devtools-protocol/tot/

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

1.1. Contenido de salida e introducción:


默认开始初始化(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. El código es el siguiente:

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. Efecto de ejecución (ya no quiero que TWebbrowser admita la respuesta de Bootstrap)

2. Interactuar con JavaScript

Para obtener más información, consulte el siguiente artículo para seguir compartiendo:

Adjunto: Publicaciones de blog relacionadas de este blog:

1. " Interacción entre TEdgeBrowser y javascript de RAD Studio 10.4.1-Uso de control de navegador Edge basado en cromo 2 "

2. "Interacción Delphi Restful entre el cliente JavaScript y el servidor Middleware"