【Delphi】使用TWebBrowser执行JavaScript命令传入JSON参数执行出错解决方案

目录

一、问题背景:

二、实际示例:

三、解决方案:

1. Delphi 代码:

2. javaScript代码:


一、问题背景:

        在用Delphi开发程序,无论是移动端还是PC端,都可以很方便的使用TWebBrowser控件,从而使用H5,这样就可以实现非常完美的界面(谁用谁知道)。Delphi只负责提供一个程序框架(基座),整个UI界面通过TWebBrowser使用H5来实现,这样就可以产生各式各样的UI,而不在使用原生Delphi的UI控件,因为原生Delphi的UI控件在PC端的VCL还是很好用的,但是到了移动端,那就实在是不好用了。

        这样就势必会有个需求就是Delphi直接执行TWebBrowser中的javaScript函数命令,幸运的是TWebBrowser提供了这样的功能,这就是TWebBrowser的EvaluateJavaScript函数。

//Delphi procedure EvaluateJavaScript(const JavaScript: string);

参数 JavaScript 可以是定义 JavaScript 语句,也可以是当前页面已经存在的函数。如果是当前页面已经存在的函数,而且该函数还有一个JSON字符串参数,那么直接调用EvaluateJavaScript函数将会出现错误。

二、实际示例:

假如当前网页中有一个javaScript函数:

//Delphi 底座调用的函数
function OnDelphiCall(JSONStr) {let jo = JSON.parse(decodedData1);ElMessageBox.alert(jo.Server_Message_Content, jo.Server_Message_Title, {// if you want to disable its autofocus// autofocus: false,confirmButtonText: 'OK',showClose: false,})

以上函数Delphi调用时需要传递一个JSON字符串,以便javaScript函数显示一个模式对话框(element-ui)

{"Server_Message_Title":"提示","Server_Message_Content":"数据保存成功!"
}

vue3中,实现Delphi 调用javaScript函数:

onMounted(() => {

    //最新的统一 DelphiCall 函数

    window.DelphiCall = OnDelphiCall;

})

Delphi中实际调用函数:

G_WebBrowser.EvaluateJavaScript('DelphiCall("' + JSONStr + '");');

此时,如果直接将以下字符串赋值给 JSONStr,然后Delphi调用,肯定会出现错误。

        {
            "Server_Message_Title":"提示",
            "Server_Message_Content":"数据保存成功!"
        }

        因为以上字符串中包含{dakkuohao ,双引号等,将会导致javaScript执行错误(将参数当作命令,解析失败错误)

三、解决方案:

        就是将字JSONStr字符串进行特殊的Base64处理,然后传递给javaScript,javaScript接收到参数后进行Base64解码后使用参数。

1. Delphi 代码:

usesSystem.NetEncoding;procedure ExecuteJavascript(Command,ParamsStr: string);
varS : string;JSONStr64 : string;JavaScriptFunction : string;
beginS := TNetEncoding.URL.Encode(ParamsStr,[],[]);  //这里取消将空格作为+号处理JSONStr64 := TNetencoding.Base64.Encode(S);// Berlin 版本的会自动增加 回车换行,所以需要替换掉,高版本的不需要JSONStr64 := JSONStr64.Replace(#10,'');JSONStr64 := JSONStr64.Replace(#13,'');//2. 构造javascript 函数JavaScriptFunction := Command + '("' + JSONStr64 + '");'; //  'DelphiCall("' + JSONStr64 + '");';//3. 执行浏览器javascript函数G_WebBrowser.EvaluateJavaScript(JavaScriptFunction);
end;

2. javaScript代码:

//Delphi 底座调用的函数
function OnDelphiCall(JSONStr) {//进行Base64解密let decodedData = window.atob(JSONStr);let decodedData1 = decodeURIComponent(decodedData);let jo = JSON.parse(decodedData1);ElMessageBox.alert(jo.Server_Message_Content, jo.Server_Message_Title, {// if you want to disable its autofocus// autofocus: false,confirmButtonText: 'OK',showClose: false,})onMounted(() => {//最新的统一 DelphiCall 函数window.DelphiCall = OnDelphiCall;
})

如果没有用过TWebBrowser可能无法看懂本文!开发中实际遇到的问题,期望能够帮助到需要的人!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/202155.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于SSM的焦作旅游协会管理系统设计与实现

末尾获取源码 开发语言:Java Java开发工具:JDK1.8 后端框架:SSM 前端:采用JSP技术开发 数据库:MySQL5.7和Navicat管理工具结合 服务器:Tomcat8.5 开发软件:IDEA / Eclipse 是否Maven项目&#x…

梨花声音教育,美食视频配音再次挑战味蕾

在为美食视频进行配音时,配音艺术家的目标是通过声音来激活观众的感官,唤起他们对美味佳肴的渴望,同时展现食物的诱人特色和烹饪的艺术性。配音应当能够描绘美食的丰富细节,传达烹饪的趣味性以及食材的高品质。以下是一些为美食视…

LangChain: 类似 Flask/FastAPI 之于 Django,LangServe 就是「LangChain 自己的 FastAPI」

原文:LangChain: 类似 Flask/FastAPI 之于 Django,LangServe 就是「LangChain 自己的 FastAPI」 - 知乎 说明:LangServe代替 langchainserver 成为新的langchain 部署工具 官网资料:🦜️🏓 LangServe | &…

VM——畸变校正、标定板标定

1、需求:精密测量时,使用远心镜头时依然会有畸变,最好使用标定板进行畸变校正和像素当量计算 2、方法:使用VM的“畸变校正”、“标定板标定”模块 2.1 标定板制作 step1: 使用海康的标定板生成工具,可以制作海康I型…

单片机调试技巧--修改bin文件实现断点

fromelf --text -a -c --outputall.dis F103_Moduel\F103_Moduel.axffromelf --bin --outputtest.bin F103_Moduel\F103_Moduel.axf 在启动文件中,修改UsageFault_Handler UsageFault_Handler\PROC; get current contextTST lr, #0x04 ; if(!EXC_RETURN[2])ITE…

智能座舱架构与芯片- (14) 测试篇 上

一、 验证平台概要 1.1 测试软件方法论 “软件定义汽车” 的时代,软件在整车制造中的重要性日渐凸显。但不同于其他行业的软件开发,汽车行业有自己独特的软件开发要求。首先是需求严谨、需求层次复杂、需要通过专业的工具进行管理;其次开发…

【开源】基于Vue.js的康复中心管理系统

项目编号: S 056 ,文末获取源码。 \color{red}{项目编号:S056,文末获取源码。} 项目编号:S056,文末获取源码。 目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员…

c语言:回文字符串

题目: 思路: 创建一个字符数组,然后判断字符串长度,用循环,看对应字符是否相等,相等则输出,不相等则将对应字符ascll较大的改成ascll较小的(题目要求字典最小的情况)。…

Markdown语法

这里写自定义目录标题 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自定义列表如何创建一个…

自然资源土地管理法律法规知识竞赛这么办才高端

近些年,全国各地自然资源厅举办了土地管理法律法规知识竞赛,从我公司承办的这些赛事来看,传统的必答题、抢答题、风险题的方式已无法激起现场比赛气氛,需要更加复杂有趣的环节设置及高端竞赛软件及其配套设备加持才可以让知识竞赛…

BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解(学习总结---从入门到深化)

目录 表格二 表单_基础表单 表单_被支持的控件 表单_表单状态 表格二 紧缩表格 通过添加 .table-condensed 类可以让表格更加紧凑&#xff0c;单元格中的内补&#xff08;padding&#xff09;均会减半 <table class"table table-condensed table-bordered"…

2023-11-22 LeetCode每日一题(网格中的最小路径代价)

2023-11-22每日一题 一、题目编号 2304. 网格中的最小路径代价二、题目链接 点击跳转到题目位置 三、题目描述 给你一个下标从 0 开始的整数矩阵 grid &#xff0c;矩阵大小为 m x n &#xff0c;由从 0 到 m * n - 1 的不同整数组成。你可以在此矩阵中&#xff0c;从一个…

LeetCode(32)串联所有单词的子串【滑动窗口】【困难】(含图解)

目录 1.题目2.答案3.提交结果截图4.图解 链接&#xff1a; 串联所有单词的子串 1.题目 给定一个字符串 s 和一个字符串数组 words。 words 中所有字符串 长度相同。 s 中的 串联子串 是指一个包含 words 中所有字符串以任意顺序排列连接起来的子串。 例如&#xff0c;如果 w…

Notpad-- ubuntu下载安装

Notpad-- ubuntu下载安装 下载 Gitee链接&#xff1a; https://gitee.com/cxasm/notepad– 安装 sudo apt install *.deb运行 /opt/apps/com.hmja.notepad/files/Notepad--出错 需要安装qt5 sudo apt-get install qt5-default

关于 win11 系统下12代/13代英特尔大小核架构 CPU 的 VMware 优化:输入延迟、卡顿,大小核调度

关于 win11 系统下12代/13代英特尔大小核架构 CPU 的 VMware 优化&#xff1a;输入延迟、卡顿&#xff0c;大小核调度 一、前言二、VMware 的优化2.1 键鼠输入延迟问题的解决2.1.1 搜索内核隔离2.1.2 关闭内存完整性并重启2.1.3 搜索启用或关闭windows功能2.1.4 关闭 hyper-v 和…

【Android】画面卡顿优化列表流畅度六(终篇)

上一篇&#xff1a; 【Android】画面卡顿优化列表流畅度五之下拉刷新上拉加载更多组件RefreshLayout修改 场景回顾&#xff1a; 业务经过一年半左右的运行后&#xff0c;出现了明显的列表卡顿情况&#xff1b;于是开始着手进行列表卡顿优化。目前的情况是&#xff1a; 网络图…

2022最新版-李宏毅机器学习深度学习课程-P49 GPT的野望

GPT→类似于Transformer Encoder 训练任务&#xff1a;Predict Next Token 使用MASK-attention&#xff0c;不断预测“下一个token”。 可以用GPT生成文章。 How to use GPT? 给出描述和例子 给出前半段&#xff0c;补上后半段 In-context Learning(no GD) 结果 目前看起…

npm install安装报错

npm WARN notsup Not compatible with your version of node/npm: v-click-outside-x3.7.1 npm ERR! Error while executing: npm ERR! /usr/bin/git ls-remote -h -t ssh://gitgithub.com/itargaryen/simple-hotkeys.git 解决办法1&#xff1a;&#xff08;没有解决我的问题…

思福迪 运维安全管理系统 test_qrcode_b 远程命令执行漏洞

思福迪 运维安全管理系统 test_qrcode_b 远程命令执行漏洞 一、漏洞描述二、漏洞影响三、网络测绘四、漏洞复现1.手动复现2.自动化复现3.python源代码 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任…

Navicat 技术指引 | 适用于 GaussDB 的数据迁移工具

Navicat Premium&#xff08;16.2.8 Windows版或以上&#xff09; 已支持对 GaussDB 主备版的管理和开发功能。它不仅具备轻松、便捷的可视化数据查看和编辑功能&#xff0c;还提供强大的高阶功能&#xff08;如模型、结构同步、协同合作、数据迁移等&#xff09;&#xff0c;这…