JavaScript和Flex的互相调用

2015-01-04

最近的工作要在JS中调用Flex的函数,同时也要求在Flex中调用JS的函数,JS和Flex相互间如何进行通信呢?这里需要用到Flex中的ExternalInterface类。

关于ExternalInterface类,Adobe的官方介绍如下:

ExternalInterface类是用来支持在 ActionScript 和 SWF 容器(例如,含有 JavaScript 的 HTML 页或使用 Flash Player 播放 SWF 文件的桌面应用程序)之间进行直接通信的应用程序编程接口。通过 ExternalInterface 类,您可以在 Flash 运行时中使用 HTML 页面中的 JavaScript 调用 ActionScript 函数。ActionScript 函数可以返回一个值,JavaScript 会立即接收它作为该调用的返回值。

先不说废话,看看如何使用ExternalInterface类吧。

一、在Flex中调用JavaScript函数

我不是很懂HTML和JS,所以我是直接在Flex工程中编译生成的bin-debug文件夹下,修改工程生成的html文件,在body标签页之间添加一段JS代码:

<script lang="javascript">
function jsFunction()
{
return 12345;
}
</script>

同时,在Flex中,添加一段AS代码来调用该函数:

private function callJS():void
{
var numFromJS:Number = ExternalInterface.call("jsFunction");
}

numFromJS的值就是12345,这就实现了在Flex中调用JS函数。

二、在JavaScript中调用Flex函数

首先,在Flex中为将要被调用的Flex函数添加CallBack,建议在Application的creationComplete事件中添加:

private function creationCompleteHandler(event:FlexEvent):void
{
ExternalInterface.addCallback("flexFunction", functionInFlex);
//flexFunction为在JS中调用的名称,functionInFlex为函数在Flex中的名称
}
private function functionInFlex():void
{
return Number(54321);
}

在JS中,要调用这个函数,也是很简单,还是直接在Flex工程中编译生成的bin-debug文件夹下,修改工程生成的html文件,在body标签页之间添加一段JS代码:

<script lang="javascript">
function callFlex()
{
var numFromFlex = document.getElementById("FlexID").functionInFlex();
}
</script>

很显然,这个numFromFlex的值是54321。需要注意的是,这个FlexID,在工程自动生成的html文件里,在body标签里有个noscript标签,里面有个object标签,object里就有id这个值,这个id的值应该和Flex工程名是一样的。至于怎么在HTML中嵌入swf文件,研究一下Flex工程自动生成的这个html文件就能得到答案。

noBorder

除非另有声明,本博客所有文章采用的授权方式为 自由转载-非商用-非衍生-保持署名 ,转载请务必注明出处,谢谢。

文章评论



章节列表