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.


												


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

    
								
  1. android与javascript相互调用
		
    下面这一节来介绍android和javascript是怎么相互调用的,这样我们的UI界面设计起来就简单多了,而且UI设计起来也可以跨平台.现在有好多web app前台框架了,比如sencha和jque ...
    
		
    2. 
						
  2. Android和JavaScript相互调用的方法
		
    转载地址:http://www.jb51.net/article/77206.htm 这篇文章主要介绍了Android和JavaScript相互调用的方法,实例分析了Android的WebView执行 ...
    
		
    3. 
						
  3. Hybrid App开发模式中,  IOS/Android 和 JavaScript相互调用方式
		
    IOS:Objective-C 和 JavaScript 的相互调用 iOS7以前,iOS SDK 并没有原生提供 js 调用 native 代码的 API.但是 UIWebView 的一个 dele ...
    
		
    4. 
						
  4. IOS Object和javaScript相互调用
		
    在IOS开发中有时会用到Object和javaScript相互调用,详细过程例如以下: 1. Object中运行javascript代码,这个比較简单,苹果提供了非常好的方法 - (NSString  ...
    
		
    5. 
						
  5. UIWebView与JavaScript相互调用
		
    UIWebView与JavaScript的那些事儿 UIWebView是IOS SDK中渲染网面的控件,在显示网页的时候,我们可以hack网页然后显示想显示的内容.其中就要用到javascript的知 ...
    
		
    6. 
						
  6. Python与Javascript相互调用超详细讲解（2022年1月最新）（三）基本原理Part 3 - 通过C/C++联通
		
    目录 TL; DR python调javascript javascript调python 原理 基于Node.js的javascript调用python 从Node调用python函数 V8 嵌入P ...
    
		
    7. 
						
  7. IE的Trident引擎下实现C++和Javascript相互调用
		
    我们知道实现C++和Javascript通讯有下表5种接口: 引擎 编写语言 API接口 C.C++与JavaScript交互(变量.函数.类) vc2005编译静态库的大小 示例EXE的大小 执行. ...
    
		
    8. 
						
  8. Python与Javascript相互调用超详细讲解（2022年1月最新）（一）基本原理 Part 1 - 通过子进程和进程间通信（IPC）
		
    TL; DR 适用于: python和javascript的runtime(基本特指cpython[不是cython!]和Node.js)都装好了 副语言用了一些复杂的包(例如python用了nump ...
    
		
    9. 
						
  9. Python与Javascript相互调用超详细讲解（四）使用PyNode进行Python与Node.js相互调用项（cai）目（keng）实（jing）践（yan）
		
    目录 前提 安装 使用 const pynode = require('@fridgerator/pynode')的时候动态链接错误 ImportError: math.cpython-39-x86_ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. P4-Related Tools Installation
			
    P4-Related Tools Installation 安装P4相关工具的步骤和说明. 本说明只适用于 Ubuntu 14.04 系统. 推荐安装的其他工具 mininet:SDN网络仿真工具 v ...
    
			
    2. 
						
  2. BZOJ 2669 【CQOI2012】 局部极小值
			
    题目链接:局部极小值 这是一道\(dp\)好题. 由于需要保证某些位置比周围都要小,那么我们可以从小到大把每个数依次填入,保证每个局部极小值填入之前周围都不能填,就只需要在加入的时候计数了. 由于局部 ...
    
			
    3. 
						
  3. Cocos2d-x学习笔记（二）AppDelegate类详解
			
    由源代码,可得到如下的类继承关系: 1. 在方法applicationDidFinishLaunching中,首先会调用CCDirector* pDirector = CCDirector::shar ...
    
			
    4. 
						
  4. python 集合取最大最小值
			
    #Create a set seta = , , , , , ]) #Find maximum value print(max(seta)) #Find minimum value print(min ...
    
			
    5. 
						
  5. 【Golang】解决Go test执行单个测试文件提示未定义问题
			
    背景 很多人记录过怎么执行Go test单个文件或者单个函数,但是要么对执行单文件用例存在函数或变量引用的场景避而不谈,要么提示调用了其它文件中的模块会报错.其实了解了go test命令的机制之后,这 ...
    
			
    6. 
						
  6. English trip -- Phonics 2  元音字母a
			
    xu言: 欲速则不达,如果这是你生命中最后一天.你还愿意花这么多精力继续坚持你现在做的事吗?如果答案是否定的,那么你需要改变了! What makes a word? 单词构成 Word 单词:    ...
    
			
    7. 
						
  7. 12月21日 简单理解Active Recore Callback， destroy_all和delete_all的区别。豆知识(alias)，语言学习法（4核心）
			
    destroy_all and delete_all Destroy the records by instantiating each record and calling its #destroy ...
    
			
    8. 
						
  8. Android控件Gridview实现多个menu模块，可添加可删除
			
    此案例主要讲的是Android控件Gridview(九宫格)完美实现仿支付宝首页,包含添加和删除功能:Fragment底部按钮切换的效果,包含四个模块,登录页面圆形头像等,一个小项目的初始布局. 效果 ...
    
			
    9. 
						
  9. webService开发(JDK版)
			
    最近做社保查询的东西,然而这个是三个公司一起做的,需要调其他公司的接口,他们公司用了webService这个当年比较流行的技术,于是乎就研究了一下这个webService. HTTP协议 + XML方 ...
    
			
    10. 
						
  10. Spring web flow的意义
			
    为什么要使用Spring web flow呢? 这里需要强调的一点就是,但凡一个技术的出现和流行,必有其适用的环境和存在的意义. Spring web flow加强了中央集权,这个该怎么理解呢?以往我 ...
    
			
    11.