My Delphi application is sending Json data to the embedded Edge browser, but Javascript is reporting a parser error.
https://i.sstatic.net/Z2BUq.png
https://i.sstatic.net/0IIzJ.png
When I modify the value for
Sender.DefaultInterface.PostWebMessageAsJson(PChar(LcTxt));alert('Ich bin drin!'). How can this complicated situation be resolved?
Delphi Code:
unit UMain;
interface
uses
Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, System.Classes,
Vcl.Graphics,
Vcl.Controls, Vcl.Forms, Vcl.Dialogs, WebView2, Winapi.ActiveX, Vcl.StdCtrls,
Vcl.Edge, Vcl.ExtCtrls;
type
TForm1 = class(TForm)
Panel1: TPanel;
Web: TEdgeBrowser;
Button1: TButton;
procedure Button1Click(Sender: TObject);
procedure WebWebMessageReceived(Sender: TCustomEdgeBrowser;
Args: TWebMessageReceivedEventArgs);
private
{ Private declarations }
public
{ Public declarations }
end;
var
Form1: TForm1;
implementation
uses
system.JSON;
{$R *.dfm}
procedure TForm1.Button1Click(Sender: TObject);
//WebView2Loader.dll must exist!
var
LcFile: string;
begin
//web.Navigate('https://www.embarcadero.com');
LcFile := ExtractFilePath(ParamStr(0)) + 'WebView2Loader.dll';
if not FileExists(LcFile) then
raise Exception.Create('WebView2Loader.dll not exists!');
LcFile := ExtractFilePath(ParamStr(0)) + 'jsontab.html';
web.Navigate(LcFile);
end;
procedure TForm1.WebWebMessageReceived(Sender: TCustomEdgeBrowser; Args:
TWebMessageReceivedEventArgs);
var
LoJsArr: TJSONArray;
Lch : Char;
LcTxt : string;
begin
LoJsArr := TJSONArray.Create;
try
Lch := 'A';
for LcTxt in ['red', 'green', 'Blue'] do //green
begin
// a)
// LoJsArr.Add(LcTxt);
// b)
// LoJsArr.Add(TJSONObject.Create(TJSONPair.Create(Lch, LcTxt)));
// c)
LoJsArr.Add(TJSONObject.Create(TJSONPair.Create('name', LcTxt)));
Lch := succ(Lch);
end;
// a) LoJsArr.ToJSON === '["rot","gr\u00FCn","Blau"]'
// b) LoJsArr.ToJSON === '[{"A":"rot"},{"B":"gr\u00FCn"},{"C":"Blau"}]'
// c) LoJsArr.ToJSON === '[{"name":"rot"},{"name":"gr\u00FCn"},{"name":"Blau"}]'
LcTxt := LoJsArr.ToJSON;
Sender.DefaultInterface.PostWebMessageAsJson(PChar(LcTxt));
finally
LoJsArr.Free;
end;
end;
end.
HTML Code (jsontab.html) Code-Transfer new XMLHttpRequest():
<blink>
<?xml version="1.0"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<script>
window.chrome.webview.addEventListener('message', arg =>
{
alert('Ich bin drin!');
let step = 1;
let text = '';
try
{
const myObj = JSON.parse(arg.data);
step = 2;
text = "<table border='1'>"
for (let x in myObj) {
text += "<tr><td>" + myObj[x].name + "</td></tr>";
}
step = 3;
text += "</table>"
}
catch (e)
{
step = 'Error: ' + e.message;
}
alert('step: ' + step);
document.getElementById("demo").innerHTML = text;
});
function XClick(id)
{
/* Server request xmlhttp.send(".."); */
window.chrome.webview.postMessage(id);
}
</script>
</head>
<body>
<h2>Make a table based on JSON data.</h2>
<input id="btn" type="button" value="Request" onclick="XClick(this.id);" />
<p id="demo"></p>
</body>
</html>
</blink>