Json-Array 到 Html-table 通过 window.chrome.webview.addEventListener, Server Delphi-Appplication [英] Json-Array to Html-table via window.chrome.webview.addEventListener, Server Delphi-Appplication
本文介绍了Json-Array 到 Html-table 通过 window.chrome.webview.addEventListener, Server Delphi-Appplication的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在将 Json 数据从我的 Delphi 应用程序传递到嵌入式 Edge 浏览器.Javascript 报告解析器错误.
I am passing Json data to the embedded Edge browser from my Delphi application. Javascript reports a parser error.
如果我在 Delphi 中更改 Sender.DefaultInterface.PostWebMessageAsJson(PChar(LcTxt)); 的值，浏览器中将没有消息alert('Ich bin drin!').这个戈尔迪之结怎么解?
If I change the value for Sender.DefaultInterface.PostWebMessageAsJson(PChar(LcTxt)); in Delp no message arrives in the browser alert('Ich bin drin!'). How can this Gordian knot be untied?
代码德尔福:
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-Deklarationen }
public
{ Public-Deklarationen }
end;
var
Form1: TForm1;
implementation
uses
system.JSON;
{$R *.dfm}
procedure TForm1.Button1Click(Sender: TObject);
//WebView2Loader.dll muss existieren!
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 ['rot', 'gruen', 'Blau'] do //grün
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 (jsontab.html) 代码传输新 XMLHttpRequest():
Code HTML (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 = 'Fehler: ' + e.message;
}
alert('step: ' + step);
document.getElementById("demo").innerHTML = text;
});
function XClick(id)
{
/* Serveranfrage 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>
推荐答案
感谢@AmigoJack
Thanks to @AmigoJack
try
{
step = 2;
text = '<table border="1">\n'; // Linebreaks will help us when debugging
for (let x in arg.data)
{
// Don't want to accidentally insert HTML where only text is supposed (XSS)
text += '<tr><td>'
+ arg.data[x].name.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"')
+ '</td></tr>\n';
}
step = 3;
text += '</table>';
}
catch (e)
{
// Even more details, like how far we came
step = 'Fehler: ' + e.message
+ '\nStep: ' + step
+ '\nData: ' + arg.data
+ '\nText: ' + text;
}
这篇关于Json-Array 到 Html-table 通过 window.chrome.webview.addEventListener, Server Delphi-Appplication的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
