Flex中利用ExternalInterface API从HTML模板(HTML templates)中调用ActionScript函数的例子

By Minidxer | March 12, 2008

在前面的Flex中利用ExternalInterface的API调用JavaScript函数的例子中，我们了解到了Flex应用中，如何利用静态事件ExternalInterface.call()调用JavaScript函数。

接下来的例子展示了Flex应用中如何利用静态ExternalInterface.addCallback()事件和JavaScript中的比特（bit），调用ActionScript函数。

下面是具体的例子以及源代码：

Download: main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
private var alert:Alert;
private function init():void {
ExternalInterface.addCallback("alert", showAlert);
}
private function showAlert(msg:String):void {
var now:Date = new Date();
alert = Alert.show(msg,now.toLocaleDateString());
alert.status = now.toLocaleTimeString();
}
]]>
</mx:Script>
</mx:Application>

下面是JavaScript文件（/src/externalInterface.js）：

/** http://blog.flexexamples.com/2008/03/11/calling-actionscript-functions-from-your-html-templates-using-the-externalinterface-api/ */
function thisMovie(movieName) {
if (navigator.appName.indexOf("Microsoft") != -1) {
return window[movieName];
} else {
return document[movieName];
}
}
function asAlert(value) {
thisMovie("main").alert(value);
}

下面是HTML模板需要添加的内容（/html-template/index.template.html）：

<head>
. . .
<script language="JavaScript" src="externalInterface.js"></script>
</head>
<body>
. . .
<div align=”center”><h1><HTML /></h1></div>
<div align=”center”><input type="Button" value="Show Flex Alert" onClick="asAlert(’Hello World, from JavaScript’);" /></div>
</body>

下面是执行实例（可以右键察看源代码）：

原文作者：Peter deHaan 翻译：minidxer

Topics: Flex | 5 Comments » | Tags: ActionScript, addCallback, API, ExternalInterface, Flex, HTML, templates, 模板

5 comments | Add One

flaher - 04/18/2009 at 5:39 pm
嵌入的HTML成了最上层，覆盖了其他的组件，比如菜单，Alert.show(”ceshi”)弹出窗口等。请问如何解决?
kelvin - 09/2/2009 at 10:09 am
请教：thisMovie(”main”) 中 “main”代表是什么？

window["main"]=?
joywu - 07/12/2010 at 12:24 pm
main指的是swf在网页中的id
cs - 05/27/2011 at 5:20 pm
your code can’t work
cs - 05/27/2011 at 5:21 pm
i’m sorry ,it’s my computer can’t work

中文Flex例子