【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 代码：

uses
  System.NetEncoding;

procedure ExecuteJavascript(Command,ParamsStr: string);
var
  S : string;
  JSONStr64 : string;
  JavaScriptFunction : string;
begin
  S := 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可能无法看懂本文！开发中实际遇到的问题，期望能够帮助到需要的人！