ScriptGate là một thư viện cho phép tương tác hai chiều giữa JavaScript và Delphi trong thành phần TWebBrowser. Bạn có thể tìm thấy dự án này tại: https://bitbucket.org/freeonterminate/scriptgate
Với ScriptGate, chúng ta có thể dễ dàng tích hợp JavaScript vào các ứng dụng Delphi. Thư viện hiện hỗ trợ phiên bản Delphi Tokyo 10.2.3 mới nhất và là một thành phần FMX, tương thích với Windows, MacOS, Android và iOS.
Làm thế nào để sử dụng?
Ví dụ, bạn có thể gọi các phương thức JavaScript từ Delphi như sau:
<head>
<script type="text/javascript">
function chaoJS()
{
alert("Xin chào, JavaScript!");
}
</script>
</head>
procedure MainForm.Nut1Click(Sender: TObject);
begin
ScriptManager.GoiMangScript('chaoJS()');
end;
Như bạn thấy, chúng ta đang gọi phương thức JavaScript chaoJS() từ Delphi.
Ngược lại, hãy xem cách gọi phương thức Delphi từ JavaScript:
procedure MainForm.ChaoDelphi()
begin
ShowMessage('Xin chào, Delphi!');
end;
<body>
<a href="delphi:ChaoDelphi()">Gọi Delphi</a>
</body>
Lưu ý chuỗi "delphi:" ở đây, đây là lược đồ được chỉ định trong hàm tạo của TScriptGate. Nếu không hiểu, hãy tiếp tục đọc phần sau.
Bắt đầu sử dụng ScriptGate
Chuẩn bị
Đầu tiên, tải mã nguồn từ BitBucket.
Tiếp theo, trong Delphi, tạo một dự án "Ứng dụng đa thiết bị" và chọn "Ứng dụng trống". *Bạn có thể tích hợp vào dự án hiện có, nhưng chỉ dành cho các dự án FireMonkey. Thêm thư mục mã nguồn đã giải nén vào đường dẫn tìm kiếm.
Nếu Android là một trong các mục tiêu phát triển, hãy thêm tệp SGWebClient.jar vào thư viện Android.
Chuẩn bị đã hoàn tất.
Tạo TScriptGate
Ở đây chúng ta sẽ sử dụng ScriptGate với WebBrowser1 và TForm1.
unit UnitChinh;
interface
uses
{...}
SG.ScriptGate; // Thêm tham chiếu thủ công đến đơn vị này
type
TFormChinh = class(TForm)
WebBrowser1: TWebBrowser;
Layout1: TLayout;
Nut1: TButton;
procedure FormTao(Sender: TObject);
procedure Nut1Click(Sender: TObject);
private var
ScriptManager: TScriptGate; // Thêm một đối tượng FScriptGate
public
procedure ChaoDelphi; // Thêm một phương thức Delphi để gọi từ JS
end;
Sử dụng sự kiện OnCreate của Form1 để tạo một instance của TScriptGate là FScriptGate
implementation
procedure TFormChinh.FormTao(Sender: TObject);
begin
ScriptManager := TScriptGate.Create(Self, WebBrowser1, 'delphi');
end;
TScriptGate.Create prototype:
constructor Create(
const iNhan: TObject;
const iTrinhDuyetWeb: TWebBrowser;
const iLượcĐồ: String); reintroduce;
- iNhan
iNhan là instance nhận phản hồi từ JavaScript. Ở đây TForm1 được chỉ định, nhưng nó có thể là instance của bất kỳ lớp nào. Các phương thức của instance được chỉ định có thể được gọi từ JavaScript.
Ví dụ:
type
TNhan = class
public
procedure Foo;
procedure Bar(const thongDiep: String);
end;
Nếu bạn chỉ định instance của lớp có tên TNhan, bạn có thể gọi phương thức Bar từ JavaScript. Lưu ý rằng các phương thức được hiển thị cho JavaScript phải có mức độ truy cập Public hoặc cao hơn. Nó sử dụng RTTI để tìm phương thức.
- iTrinhDuyetWeb
Chỉ định một instance của TWebBrowser được liên kết với TScriptGate. Bạn có thể gọi các phương thức JavaScript được tải bởi WebBrowser được chỉ định.
- iLượcĐồ
Tham số iLượcĐồ được đính kèm vào phương thức ScriptGate trong ví dụ đầu tiên "delphi:". Điều này có nghĩa tương tự như "javascript:" được chỉ định khi sử dụng JavaScript hoặc "file:" khi chỉ định tệp cục bộ. Dù bạn chỉ định gì ở đây, bạn vẫn phải chỉ định cùng một chuỗi ở phía JavaScript. Lưu ý rằng chuỗi được truyền cho tham số này không cần dấu hai chấm ":".
Sau đó, viết một phương thức để gọi JavaScript và một phương thức để gọi từ JavaScript.
// Gọi helloJS() trong JavaScript.
// Bạn cũng có thể sử dụng hàm vô danh để lấy giá trị trả về.
procedure TFormChinh.Nut1Click(Sender: TObject);
begin
ScriptManager.GoiMangScript(
'chaoJS()',
procedure(const ketQua: String)
begin
ShowMessage(ketQua);
end
);
end;
// Phương thức có thể được gọi từ JavaScript, phương thức trong JavaScript được gọi là ChaoDelphi.
procedure TFormChinh.ChaoDelphi;
begin
ShowMessage('Xin chào, Delphi!');
end;
Dưới đây là ví dụ hoàn chỉnh do tác giả viết, trình bày cách Delphi và JavaScript gọi nhau và cách truyền tham số khi gọi.
unit UnitChinh;
interface
uses
System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs,
FMX.Controls.Presentation, FMX.StdCtrls, FMX.Layouts, FMX.WebBrowser,
SG.ScriptGate;
type
TFormChinh = class(TForm)
WebBrowser1: TWebBrowser;
Layout1: TLayout;
Nut1: TButton;
Layout2: TLayout;
Nut2: TButton;
procedure FormTao(Sender: TObject);
procedure Nut1Click(Sender: TObject);
procedure Nut2Click(Sender: TObject);
private var
ScriptManager: TScriptGate;
public
procedure ChaoDelphi(const chuoi: String);
procedure Cong(const ThongDiep: String; const A, B: Integer);
end;
var
FormChinh: TFormChinh;
implementation
{$R *.fmx}
const
MauHTML =
'<html>' +
'<header>' +
'<script type="text/JavaScript">' +
'function chaoJS(thongDiep, thongDiep2) { alert(thongDiep + thongDiep2); return "Xin chào Delphi ! Tôi là JavaScript !"; }' + // Gọi từ Delphi
'</script>' +
'</head>' +
'<body>' +
'<br><br>' + // Gọi thủ tục Delphi
'<a href="TenLượcĐồCuaBan:ChaoDelphi(''gọi bởi JS'')">Gọi thủ tục Delphi không tham số</a>' +
'<br><br>' +
'<a href="TenLượcĐồCuaBan:Cong(''Tính: 30 + 12 = '', 30, 12)">Gọi thủ tục Delphi</a>' +
'<body>' +
'</html>';
procedure TFormChinh.FormTao(Sender: TObject);
begin
WebBrowser1.TaiTuChuoi(MauHTML, '/');
// Phương thức của đối tượng được chỉ định bởi đối số đầu tiên được
// gọi từ JavaScript.
ScriptManager := TScriptGate.Create(Self, WebBrowser1, 'TenLượcĐồCuaBan');
end;
procedure TFormChinh.Nut1Click(Sender: TObject);
begin
ScriptManager.GoiMangScript(
'chaoJS("Xin chào JS ! ", "Tôi là Delphi !")',
procedure(const ketQua: String)
begin
ShowMessage(ketQua);
end
);
end;
procedure TFormChinh.Nut2Click(Sender: TObject);
begin
ScriptManager.DanhGia(
'document.getElementsByTagName("html")[0].outerHTML',
procedure(const ketQua: String)
begin
ShowMessage(ketQua);
end
);
end;
procedure TFormChinh.Cong(const ThongDiep: String; const A, B: Integer);
begin
ShowMessage(ThongDiep + (A + B).ToString);
end;
procedure TFormChinh.ChaoDelphi(const chuoi: String);
begin
ShowMessage('Xin chào ! ' + chuoi);
end;
end.