开源项目ScriptGate,Delphi与JavaScript相互调用的神器

ScriptGate是一个实现TWebBrowser上的JavaScript和Delphi代码相互调用的库,具体在这里:https://bitbucket.org/freeonterminate/scriptgate

用ScriptGate,我们可以轻松实现JavaScript在Delphi上的使用了,目前支持最新的Delphi tokyo 10.2.3版,注意,属于FMX类型的控件,作者说支持Windows,MacOS,Android及iOS.

我该怎么办?



例如,您可以从Delphi调用以下JavaScript方法。

<head>
  <script type = “text / javascript” >
    function  helloJS ()
    {
      alert (“Hello,JavaScript!” );
    }
  </ script>
</ head>
procedure TForm1.Button1Click(Sender: TObject);
begin
  FScriptGate.CallScript(‘helloJS()‘);
end;

看清了吧,在Delphi中调用JavaScript的helloJS。

反之,再看看从JavaScript调用Delphi方法:

procedure TForm1.HelloDelphi()
begin
  ShowMessage(‘Hello, Delphi!‘);
end;
<body>
  <a href="delphi:HelloDelphi()">Call Delphi</a>
</body>

注意这里的“delphi:”字符串,是TScriptGate构造函数指定的方案,不明白,那继续往下看。

尝试使用ScriptGate



准备工作



首先,从BitBucket下载代码。

接下来,在新建中的“多设备应用程序”中选择“空应用程序”。
*当然可以将其合并到现有项目中,但仅限于FireMonkey应用项目。
将下载并解压的代码目录添加到搜索路径。

如果Android包含在开发目标中,请将SGWebClient.jar添加到Android的库中。

至此,准备工作完成。

建立TScriptGate



这里我们将ScriptGate与WebBrowser1,TForm1结合使用。

unit Unit1;

interface

uses
  {...}
  SG.ScriptGate; //手工引用此单元

type
  TForm1 = class(TForm)
    WebBrowser1: TWebBrowser;
    Layout1: TLayout;
    Button1: TButton;
    procedure FormCreate(Sender: TObject);
    procedure Button1Click(Sender: TObject);
  private var
    FScriptGate: TScriptGate; // 增加一个FScriptGate对象
  public
    procedure HelloDelphi; // 增加一个准备在JS中调用的Delphi方法
  end;

利用Form1的OnCreate事件,先建一个TScriptGate的实例对象FScriptGate

implementation

procedure TForm1.FormCreate(Sender: TObject);
begin
  FScriptGate := TScriptGate.Create(Self, WebBrowser1, ‘delphi‘);
end;

TScriptGate.Create原型:

constructor Create(
  const iReceiver: TObject;
  const iWebBrowser: TWebBrowser;
  const iScheme: String); reintroduce;
  • iReceiver

iReceiver是一个从JavaScript接收响应的实例。
这里TForm1被指定,但它可以是类的任何实例。
这里指定的实例的方法可以被JavaScript调用。

如:

type
  TReceiver = class
  public
    procedure Foo;
    procedure Bar(const msg: String);
  end;

如果您指定名为TReceiver 的类的实例,则可以从JavaScript调用Bar方法。
这里需要注意的是,暴露给JavaScript的方法的访问级别必须是Public的或更高级别的。
它使用RTTI进行方法查找。

  • iWebBrowser

指定TScriptGate所关联的TWebBrowser的一个实例。
您可以调用指定WebBrowser加载的JavaScript方法。

  • IScheme

调用第一个示例中附加的iScheme ScriptGate方法“delphi:”的参数。
这与指定本地文件时使用JavaScript或“file:”时指定的“JavaScript:”具有相同的含义。
无论你在这里指定什么,你还必须在JavaScript端指定相同的字符串。
请注意,传递给参数的字符串不需要冒号“:”。

然后编写一个调用JavaScript的方法和一个从JavaScript调用的方法。

//在JavaScript中调用helloJS()。
//你也可以使用匿名函数检索返回值。
procedure TForm1.Button1Click(Sender: TObject);
begin
  FScriptGate.CallScript(
    ‘helloJS()‘,
    procedure(const iResult: String)
    begin
      ShowMessage(iResult);
    end
  );
end;
//允许JavaScript调用的方法,JavaScript中的方法被称为HelloDelphi。
procedure TForm1.HelloDelphi;
begin
  ShowMessage(‘Hello, Delphi!‘);
end;

加载到WebBrowser1中的HTML如下所示。

<html>
  <header>
    <script type="text/JavaScript">
      function helloJS() { alert("Hello, JavaScript!"); return "Hello !!"; }
    </script>
  </head> 

  <body>
    <br><br>
    <a href="delphi:HelloDelphi()">Call Delphi procedure</a>
  <body>
</html>;

下面是作者写的完整的例子,演示了Delphi与JavaScript间如何互相调用以及在调用时,如何传递参数。

unit Unit1;

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
  TForm1 = class(TForm)
    WebBrowser1: TWebBrowser;
    Layout1: TLayout;
    Button1: TButton;
    Layout2: TLayout;
    Button2: TButton;
    procedure FormCreate(Sender: TObject);
    procedure Button1Click(Sender: TObject);
    procedure Button2Click(Sender: TObject);
  private var
    FScriptGate: TScriptGate;
  public
    procedure HelloDelphi(const iStr: String);
    procedure Add(const Msg: String; const A, B: Integer);
  end;

var
  Form1: TForm1;

implementation

{$R *.fmx}

const
  SampleHTML =
    ‘<html>‘ +
    ‘<header>‘ +
      ‘<script type="text/JavaScript">‘ +
        ‘function helloJS(msg, msg2) { alert(msg + msg2); return "Hello Delphi ! I am JavaScript !"; }‘ + // Call from Delphi
      ‘</script>‘ +
    ‘</head>‘ +
    ‘<body>‘ +
      ‘<br><br>‘ + // Call Delphi Method
      ‘<a href="YourOrgScheme:HelloDelphi(‘‘call by JS‘‘)">Call Delphi noparam procedure</a>‘ +
      ‘<br><br>‘ +
      ‘<a href="YourOrgScheme:Add(‘‘Calc: 30 + 12 = ‘‘, 30, 12)">Call Delphi procedure</a>‘ +
    ‘<body>‘ +
    ‘</html>‘;

procedure TForm1.FormCreate(Sender: TObject);
begin
  WebBrowser1.LoadFromStrings(SampleHTML, ‘/‘);

  // The method of the object specified by the first argument is
  // called from JavaScript.
  FScriptGate := TScriptGate.Create(Self, WebBrowser1, ‘YourOrgScheme‘);
end;

procedure TForm1.Button1Click(Sender: TObject);
begin
  FScriptGate.CallScript(
    ‘helloJS("Hello JS ! ", "I am Delphi !")‘,
    procedure(const iResult: String)
    begin
      ShowMessage(iResult);
    end
  );
end;

procedure TForm1.Button2Click(Sender: TObject);
begin
  FScriptGate.Eval(
    ‘document.getElementsByTagName("html")[0].outerHTML‘,
    procedure(const iResult: String)
    begin
      ShowMessage(iResult);
    end
  );
end;

procedure TForm1.Add(const Msg: String; const A, B: Integer);
begin
  ShowMessage(Msg + (A + B).ToString);
end;

procedure TForm1.HelloDelphi(const iStr: String);
begin
  ShowMessage(‘Hello ! ‘ + iStr);
end;

end.

原文地址:https://www.cnblogs.com/kinglandsoft/p/9249374.html

时间: 2024-10-22 08:36:27

开源项目ScriptGate,Delphi与JavaScript相互调用的神器的相关文章

Hybrid App开发模式中, IOS/Android 和 JavaScript相互调用方式

IOS:Objective-C 和 JavaScript 的相互调用 iOS7以前,iOS SDK 并没有原生提供 js 调用 native 代码的 API.但是 UIWebView 的一个 delegate 方法使我们可以做到让 js 需要调用时,通知 native.在 native 执行完相应调用后,可以用stringByEvaluatingJavaScriptFromString 方法,将执行结果返回给 js.这样,就实现了 js 与 native 代码的相互调用.具体让 js 通知 na

IOS Object和javaScript相互调用

在IOS开发中有时会用到Object和javaScript相互调用,具体步骤如下: 1. Object中执行javascript代码,这个比较简单,苹果提供了很好的方法 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script 2. javascript执行过程中返回给Object的数据或者调用Object方法,这个时候就需要用到 UIWebView的地址重定向功能,主要代码如下: (1)创建UIWebView

UIWebView与JavaScript相互调用

UIWebView与JavaScript的那些事儿 UIWebView是IOS SDK中渲染网面的控件,在显示网页的时候,我们可以hack网页然后显示想显示的内容.其中就要用到javascript的知识,而UIWebView与javascript交互的方法就是stringByEvaluatingJavaScriptFromString: 有了这个方法我们可以通过objc调用javascript,可以注入javascript. 首先我们来看一下,如何调用javascript: [webView s

Android Webview 和Javascript交互,实现Android和JavaScript相互调用

在Android的开发过程中.遇到一个新需求.那就是让Java代码和Javascript代码进行交互.在IOS中实现起来很麻烦.而在Android中相对来说容易多了.Android对这种交互进行了很好的封装.我们可以很简单的用Java代码调用WebView中的js函数.也可以用WebView中的js来调用Android应用中的Java代码. 案例主要包含了: Html中调用Android方法 Android调用JS方法无参数 Android调用JS方法有参数 Android调用JS方法有参数且有

IOS:ios和javaScript相互调用 oc和js

文章来自:http://blog.csdn.net/intbird 相比android和js进行交互,ios和js进行交互是比较方便的; android和js进行交互,请看这里: http://blog.csdn.net/intbird/article/details/42295453 android和js进行交互框架,看这里: http://blog.csdn.net/intbird/article/details/46461203 这里看ios和js的交互 0.上个丑图 1,oc调用js,超

【JavaScript】直接拿来用!最火的前端开源项目(一)

摘要:对于开发者而言,了解当下比较流行的开源项目很是必要.利用这些项目,有时能够让你达到事半功倍的效果.为此,本文整理GitHub上最火的前端开源项目列表,这里按分类的方式列出前九个. 对于开发者而言,了解当下比较流行的开源项目很是必要.利用这些项目,有时能够让你达到事半功倍的效果.为此,本文整理GitHub上最火的前端开源项目列表,内容涵盖了Hack Design. Designer School.TheExpressiveWeb.如何成为优秀的前端开发工程师.Web开发教学材等,这里按分类的

[转]C# winform与Javascript的相互调用

C# winform与Javascript的相互调用 <html> <head> <meta http-equiv="Content-Language" content="zh-cn"> <script language="javascript" type="text/javascript"> <!-- 提供给C#程序调用的方法 --> function messag

Android中通过WebView控件实现与JavaScript方法相互调用的地图应用

在Android中通过WebView控件,可以实现要加载的页面与Android方法相互调用,我们要实现WebView中的addJavascriptInterface方法,这样html才能调用android方法,在这里我个人觉得有点和DWR相似. 为了让大家容易理解,我写了一个简单的Demo,具体步骤如下: 第一步:新建一个Android工程,命名为WebViewDemo(这里我在assets里定义了一个html页面). 第二步:修改main.xml布局文件,增加了一个WebView控件还有But

C#代码与JAVASCRIPT函数的相互调用

问:1.如何在JavaScript访问C#函数?2.如何在JavaScript访问C#变量?3.如何在C#中访问JavaScript的已有变量?4.如何在C#中访问JavaScript函数? 问题1答案如下:javaScript函数中执行C#代码中的函数:方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中;        2.在前台写一个js函数,内容为document.getElementById("btn1").click();        3.