目錄

一、問題背景：

二、實際示例：

三、解決方案：

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可能無法看懂本文！開發中實際遇到的問題，期望能夠幫助到需要的人！