Delphi 11下TWebBrowser无法正确渲染特定页面的技术问题

尝试用TWebBrowser加载页面http://ekloges-prev.singularlogic.eu/2019/v/home/municipaldistricts/814/时，弹出错误：

unable to get property 'remove' of undefined or null reference

但加载另一个页面http://ekloges-prev.singularlogic.eu/v2012b/public/index.html#{%22cls%22:%22level%22,%22params%22:{%22level%22:%22ep%22, %22id%22:36}}却能正常显示。两个页面均包含JavaScript代码，在Chrome浏览器中均可正常打开，说明第一个页面需要对TWebBrowser做额外设置才能正确渲染。

复现代码 #

unit Unit5;

interface

uses
  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes, Vcl.Graphics,
  Vcl.Controls, Vcl.Forms, Vcl.Dialogs, Vcl.OleCtrls, SHDocVw, Vcl.StdCtrls;

type
  TForm5 = class(TForm)
    Button1: TButton;
    WebBrowser1: TWebBrowser;
    procedure Button1Click(Sender: TObject);
  end;

var
  Form5: TForm5;

implementation

{$R *.dfm}

procedure TForm5.Button1Click(Sender: TObject);
begin
  // 无法正常显示，使用Navigate2()也一样
  WebBrowser1.Navigate('http://ekloges-prev.singularlogic.eu/2019/v/home/municipaldistricts/814/');

  // 这个页面可以正常显示
  //WebBrowser1.Navigate('http://ekloges-prev.singularlogic.eu/v2012b/public/index.html#{%22cls%22:%22level%22,%22params%22:{%22level%22:%22ep%22,%22id%22:36}}');
end;

end.

解决方法 #

TWebBrowser默认使用IE7兼容模式渲染页面，而2019年的页面依赖较新的JavaScript特性，需要强制TWebBrowser使用高版本IE引擎：

1. 修改注册表（最可靠方式）：

   • 打开注册表编辑器，定位到路径：HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION
   • 右键新建字符串值，名称为你的程序文件名（比如YourApp.exe）
   • 设置值为对应IE版本的标识：
     • IE11边缘模式：11001
     • IE11标准模式：11000
     • IE10边缘模式：10001
     • IE10标准模式：10000

2. 代码中设置（可选）：
   可以在程序启动时通过代码修改注册表，但需要管理员权限，示例代码如下：

   uses Registry;
   
   procedure SetBrowserEmulation;
   var
     Reg: TRegistry;
     AppName: string;
   begin
     AppName := ExtractFileName(ParamStr(0));
     Reg := TRegistry.Create;
     try
       Reg.RootKey := HKEY_CURRENT_USER;
       if Reg.OpenKey('Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION', True) then
       begin
         Reg.WriteString(AppName, '11001');
         Reg.CloseKey;
       end;
     finally
       Reg.Free;
     end;
   end;
   

   在FormCreate或程序入口调用这个方法即可。

原因说明 #

错误提示中的unable to get property 'remove' of undefined or null reference，是因为旧版本IE（如IE7）不支持部分现代DOM API，或者页面中的JavaScript假设浏览器支持这些API，在旧引擎下找不到对应的DOM元素或方法导致报错。2012年的页面针对旧IE做了兼容，所以能正常加载。

内容的提问来源于stack exchange，提问作者user3140961