TEdgeBrowser 逐个字符动态显示

原创已于 2026-03-02 11:01:04 修改 · 532 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#Delphi #Windows桌面程序 #EdgeBrowser #JavaScript

于 2026-03-02 10:25:14 首次发布

TEdgeBrowser 逐个字符动态显示

效果

现在如果用电脑浏览器打开各家AI的网页，是个简单的聊天界面。在这个页面上，AI 输出的内容，和普通的网页打开一个网站不一样，内容是逐个字往外蹦的，类似页面背后有个人在打字。

Delphi 编程如何实现

使用 Delphi 编程，很多时候要显示格式化的文字，包括图片，使用浏览器是个很好的方案。比如本博客前面的文章提到的显示预览 Markdown 的文字，就是先用 Markdown 解释器把 Markdown 转化为 HTML 然后使用浏览器来显示。

这里，我们讨论的是基于 VCL 框架的 Windows 桌面程序。

Delphi 带了两个浏览器控件。一个是老的 TWebBrowser，一个是新的 TEdgeBrowser。现在最好是用新的 TEdgeBrowser。

使用 TEdgeBrowser 的要点

拖一个 TEdgeBrowser 到 Form 上面，直接运行程序，是看不到任何东西的。这里必须：

在程序的 exe 文件的同一目录下，放上 WebView2Loader.dll
使用 EdgeBrowser 加载页面之前，先执行：

EdgeBrowser1.CreateWebView;

通常可以把上述代码放到 Form1.OnCreate 事件方法里面。放到 OnShow 事件里面也不错。

页面加载内容

从 Web Server 加载。

EdgeBrowser1.Navigate('https://www.qq.com');

从电脑的本地文件加载，类似打开文件：

  EdgeBrowser1.Navigate(ExtractFilePath(ParamStr(0))  + 'index.html');

注意：这里加载本地文件，必须包含完整的路径名称。对 Delphi 程序来说，ParamStr(0) 返回的是当前程序 EXE 文件的名称，ExtractFilePath 是从文件名提取文件夹的名称。

EdgeBrowser1.NavigateToString(‘abcd’) 这个方法的参数是字符串。调用这个方法，页面上直接显示输入的参数 abcd。但这个方法不支持 HTML 格式字符串。如果在这里输入的是带 HTML 格式的字符串，浏览器不显示任何东西。

如何让 Delphi 程序逐个字输入给 EdgeBrowser

真正让 EdgeBrowser 动起来的，是它内部运行的 JavaScript。为了让 EdgeBrowser 在我们使用它的时候，它内部有 JavaScript 函数给我们调用，我们必须先做一个包含有 JavaScript 代码的 HTML 页面文件，在程序启动的时候让 EdgeBrowser 先加载打开这个 HTML 文件。这个 HTML 文件的代码如下：

<!DOCTYPE html>

<html>

<head>

  <title>Ollama Output</title>
  
<script>
  function appendText(t){
     var d = document.getElementById("content");
     d.innerHTML += t;
     window.scrollTo(0, document.body.scrollHeight);
  }
</script>

</head>

<body style="font-size:18px;font-family:微软雅黑;">

  <div id="content">From here:</div>


</body>

</html>

代码解释：

上述 HTML 文件定义了一个 div，id 是 content;
上面的 JavaScript 代码很简单，调用它的 appendText 函数，传入字符串，它找到 id 为 content 的元素，在这个元素的 innerHTML 后面追加字符串。最后滚动到底部。

Delphi 程序操控 EdgeBrowser 里面的 JavaScript

当我们的 Delphi 程序要往浏览器里面添加文字，则调用 JavaScript 函数。代码如下：

procedure TFmBrowser.Button1Click(Sender: TObject);
begin
  //在页面上追加字符，显示动态增加文字的效果。
{------------------------------------------------------------------
  这里是执行页面里面的函数，传入Edit1 里面的文字作为参数，把字符追加到 div 的内容后面，
  效果就是看到页面上显示的文字在逐个增加。
------------------------------------------------------------------------}

  EdgeBrowser1.ExecuteScript(
  'appendText("' + Edit1.Text + '");');
end;

总结

这里的核心其实就是 EdgeBrowser 有一个 ExecuteScript 方法，可以调用它内部页面里面加载的 JavaScript 函数。

更简单的办法

不使用预先加载的 HTML 文件，也就是不需要有个页面 div 元素，也不需要事先在加载的页面里面包含 JavaScript 函数，而是直接调用 TEdgeBrowser：

procedure TFmBrowser.Button2Click(Sender: TObject);
begin
  //EdgeBrowser1.CreateWebView 激活 TEdgeBrowser后，无需加载 index.html，以下代码就能执行成功
  EdgeBrowser1.ExecuteScript('document.body.innerHTML = document.body.innerHTML + "' + Edit1.Text + '"');
end;