TEdgeBrowser 加载网页是白屏时重新加载

在使用 TEdgeBrowser 组件时，如果遇到网页加载后显示白屏的情况，可以通过监听 OnNavigationCompleted 事件来检测这种情况，并在检测到白屏时自动重新加载页面。为了实现这一点，我们需要结合一些额外的逻辑来判断页面是否真正加载成功。

步骤

1. 添加 TEdgeBrowser 组件: 确保你在窗体上有一个 TEdgeBrowser 组件。
2. 设置事件处理器: 将 OnNavigationCompleted 和 OnContentLoading 事件连接到相应的事件处理程序。
3. 检查导航结果: 在 OnNavigationCompleted 事件中检查页面是否加载成功。
4. 检查页面内容: 在 OnContentLoading 或其他适当的地方检查页面内容是否为空或白屏。
5. 自动重新加载: 如果检测到白屏情况，调用 Refresh 方法重新加载页面。

示例代码

以下是一个完整的 Delphi 示例，展示了如何使用 TEdgeBrowser 并通过 OnNavigationCompleted 和 OnContentLoading 事件来检测白屏并自动重新加载页面：

unit Unit1;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.StdCtrls, MSHTML, SHDocVw_EH, CoreWebView2Types, CoreWebView2EnvironmentOptions,
  CoreWebView2ControllerOptions, CoreWebView2Profile, CoreWebView2ProfilePreferences, CoreWebView2RuntimeVersionInfo, CoreWebView2Settings,
  CoreWebView2CookieManager, CoreWebView2HttpHeadersCollection, CoreWebView2HttpRequestHeaders, CoreWebView2HttpResponseHeaders,
  CoreWebView2HostResource, CoreWebView2DownloadOperation;

type
  TForm1 = class(TForm)
    EdgeBrowser1: TEdgeBrowser;
    Button1: TButton;
    Edit1: TEdit;
    Memo1: TMemo;
    procedure FormCreate(Sender: TObject);
    procedure Button1Click(Sender: TObject);
    procedure EdgeBrowser1NavigationCompleted(Sender: TObject; Args: TCoreWebView2NavigationCompletedEventArgs);
    procedure EdgeBrowser1ContentLoading(Sender: TObject; Args: TCoreWebView2ContentLoadingEventArgs);
  private
    { Private declarations }
    FIsWhiteScreenDetected: Boolean;
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{ $ R *.dfm}

procedure TForm1.FormCreate(Sender: TObject);
begin
  // 初始化标志变量
  FIsWhiteScreenDetected := False;

  // 初始化时导航到默认页面
  EdgeBrowser1.Navigate('https://www.google.com');
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  // 导航到用户输入的URL
  EdgeBrowser1.Navigate(Edit1.Text);
end;

procedure TForm1.EdgeBrowser1NavigationCompleted(Sender: TObject; Args: TCoreWebView2NavigationCompletedEventArgs);
begin
  if Args.IsSuccess then
  begin
    Memo1.Lines.Add('Page loaded successfully: ' + EdgeBrowser1.DocumentTitle);

    // 检查是否检测到白屏
    if FIsWhiteScreenDetected then
    begin
      Memo1.Lines.Add('White screen detected and reloaded.');
      FIsWhiteScreenDetected := False;
    end;
  end
  else
  begin
    Memo1.Lines.Add('Failed to load page. Error Code: ' + IntToStr(Args.WebErrorStatus));
  end;
end;

procedure TForm1.EdgeBrowser1ContentLoading(Sender: TObject; Args: TCoreWebView2ContentLoadingEventArgs);
begin
  // 使用 ExecuteScriptAsync 来检查页面内容是否为空
  EdgeBrowser1.ExecuteScriptAsync('document.body.innerHTML', 
    procedure(ResultObject: ICoreWebView2String; ExceptionObject: ICoreWebView2WebError)
    begin
      if Assigned(ExceptionObject) then
      begin
        Memo1.Lines.Add('Error executing script: ' + ExceptionObject.ErrorMessage);
        Exit;
      end;

      var Content: string := ResultObject.ToString;
      if Trim(Content) = '' then
      begin
        Memo1.Lines.Add('White screen detected during content loading.');

        // 设置标志变量
        FIsWhiteScreenDetected := True;

        // 自动重新加载页面
        EdgeBrowser1.Refresh;
      end;
    end);
end;

end.

解释

1. FormCreate:
   • 在窗体创建时，初始化 FIsWhiteScreenDetected 标志变量为 False。
   • 导航到默认的 URL (https://www.google.com)。
2. Button1Click:
   • 当用户点击按钮时，导航到用户在 Edit1 中输入的 URL。
3. EdgeBrowser1NavigationCompleted:
   • 这个事件处理程序在每次导航操作完成后被调用。
   • 检查 Args.IsSuccess 属性：
     • 如果为 True，表示页面加载成功，并记录文档标题。
     • 如果 FIsWhiteScreenDetected 为 True，表示之前检测到白屏并且已经重新加载过页面。
     • 如果为 False，表示页面加载失败，并记录错误码。
4. EdgeBrowser1ContentLoading:
   • 这个事件处理程序在内容开始加载时被调用。
   • 使用 ExecuteScriptAsync 方法执行 JavaScript 脚本，获取页面的 document.body.innerHTML 内容。
   • 检查返回的内容是否为空（即白屏）：
     • 如果内容为空，则设置 FIsWhiteScreenDetected 标志变量为 True。
     • 调用 EdgeBrowser1.Refresh 方法重新加载页面。

通过这种方式，你可以有效地检测和处理 TEdgeBrowser 加载网页时可能出现的白屏情况，并自动重新加载页面以确保内容正确显示。