当前位置: 首页 > article >正文

【Delphi】如何解决使用webView2时主界面置顶,而导致网页选择文件对话框被覆盖问题

一、问题描述:

        在Delphi 中使用WebView2控件,如果预先把主界面置顶(Self.FormStyle := fsStayOnTop;),此时,如果在Web页面中有使用(<input type="file" id="fileInput" accept=".txt, .pdf, .doc, .docx" required>  )选择文件,这样就会导致选择文件的对话框被覆盖,从而无法操作。

二、解决方案

        由于WebView2通过H5打开文件选择窗口时,Delphi无法直接获取到事件通知,因为文件选择时由浏览器进程管理的,所以需要使用一些技巧来解决。

使用javascript监听文件选择事件:

        可以通过在 WebView2 中注入 JavaScript 代码来监听文件选择窗口的打开和关闭事件,然后通过 WebView2 的事件机制将这些事件传递到 Delphi 端。

操作步骤:

  1. 注入 JavaScript 代码:在页面加载完成后,注入 JavaScript 代码来监听文件选择窗口的打开和关闭事件。
  2. 通过 WebMessage 传递事件:将事件通过 `window.chrome.webview.postMessage` 传递到 Delphi 端。
  3. 在 Delphi 中处理事件:在 Delphi 中监听 WebView2 的 `WebMessageReceived` 事件,并根据接收到的消息调整主窗体的置顶状态。

示例代码:

JavaScript 代码:

document.addEventListener('focus', function(event) {
    if (event.target.tagName === 'INPUT' && event.target.type === 'file') {
        window.chrome.webview.postMessage('fileDialogOpen');
    }
}, true);

document.addEventListener('blur', function(event) {
    if (event.target.tagName === 'INPUT' && event.target.type === 'file') {
        window.chrome.webview.postMessage('fileDialogClose');
    }
}, true);

Delphi 代码:

procedure TForm1.WebView2NavigationCompleted(ASender: TObject; const Args: ICoreWebView2NavigationCompletedEventArgs);
begin
  // 注入 JavaScript 代码
  WebView2.ExecuteScript(
    'document.addEventListener(''click'', function(event) {' +
    '    if (event.target.tagName === ''INPUT'' && event.target.type === ''file'') {' +
    '        window.chrome.webview.postMessage(''fileDialogOpen'');' +
    '    }' +
    '}, true);',
    
    nil
  );
end;

procedure TBase_Form.WebViewWebMessageReceived(Sender: TObject; const Source,
  MessageHTML, Json: WString);
begin

        if MessageHTML = 'fileDialogOpen' then
           begin
             Self.FormStyle := fsNormal;
             FH5OpenDialog := True;
           end;
    
end;

        因为文件选择按键获取焦点的同时只要点击,就立即失去了焦点,所以没有解决问题,这就需要配合Delphi的TApplicationEvents控件中的OnActivate事件来共同处理。

注意

      定义公用变量:FH5OpenDialog

procedure TBase_Form.ApplicationEvents1Activate(Sender: TObject);
begin
    if FH5OpenDialog then
       begin
         Self.FormStyle := fsStayOnTop;
         FH5OpenDialog := False;
       end;
end;


http://www.kler.cn/a/569207.html

相关文章:

  • Python的那些事第三十四篇:基于 Plotly 的交互式图表与仪表板设计与应用
  • 【北京迅为】itop-3568 开发板openharmony鸿蒙烧写及测试-第1章 体验OpenHarmony—烧写镜像
  • 6-2JVM解释器
  • docker利用docker-compose-gpu.yml启动RAGFLOW,文档解析出错【亲测已解决】
  • 高效API开发:FastAPI中的缓存技术与性能优化
  • 前缀和算法 算法4
  • unsloth报错FileNotFoundError: [WinError 3] 系统找不到指定的路径。
  • Transformer 代码剖析2 - 模型训练 (pytorch实现)
  • 【大模型学习笔记】0基础本地部署dify教程
  • AI辅助学习vue第十四章
  • 欧拉22.03系统安装离线redis 6.2.5
  • vue3配置端口,比底部vue调试
  • logback日志输出配置范例
  • FPGA AXI-Stream协议详解与仿真实践
  • Git版本管理逻辑解析:从核心原理到工作流实践
  • Java零基础入门笔记:(7)异常
  • 中间件专栏之Redis篇——Redis中过期key删除和内存淘汰策略
  • TCP传输过程中问题的检测和解决
  • 物联网坡体斜度监测设备 顶级功能,还想集成CPS 红外 土质监测
  • 如何用 TikTok 的创作工具提升你的视频质量?