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

其他 2021-01-12 10:05:33 阅读次数: 0

目录

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

 附：本博客相关博文：

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

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/

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.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与中间件服务器交互》

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

猜你喜欢

转载自blog.csdn.net/pulledup/article/details/109848546
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
周排行
Python环境安装与基础语法（1）——计算机基础知识
IMU预积分
ADAS中的LDW、FCW、BSD、LCA、ACC、AEB、APA、DMS代表的含义
B站笔试两道题
skyeye arm 硬件虚拟机环境的搭建
Web前端静态页面示例
数组-合并排序数组 II-简单
springcloud之版本问题启动报错
面向对象-------------匿名对象(六)
输入URL到页面呈现中间发生了什么？
每日归档
更多
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022