Flex中利用ExternalInterface的API调用JavaScript函数的事例

Flex中利用ExternalInterface的API调用JavaScript函数的例子
http://blog.minidx.com/2008/03/10/562.html

下面的例子展示了如何在Flex中利用ExternalInterface类和static的ExternalInterface.call()函数调用JavaScript函数。
下面是具体的例子以及源代码：

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">

<mx:Script>
<![CDATA[
private function callJavaScript():void {
ExternalInterface.call("sayHelloWorld");
}
]]>
</mx:Script>

<mx:Button label="Say 'Hello World'"
click="callJavaScript();" />

</mx:Application>
然后在HTML文件中，在<head>和</head>间添加下面的代码：
<script language="JavaScript" type="text/javascript">
function sayHelloWorld() {
alert("Hello World, from JavaScript");
}
</script>
下面是执行实例（可以右键察看源代码）：

如果你用的是Flex Builder,那可以编辑/html-template/目录下的“index.template.html” 文件。该文件是用来创建/bin-debug/和/bin-release/目录下的主HTML文件。如果你清空过你的整个工程，那可能会有区别。还有很重要的是修改index.template.html文件会让你覆盖原文件如果修改了Flex SDK版本或者改变了工程的HTML封装（就像改变了“Use Express Install” 或者“Enable integration with browser navigation”.）。
如果你不是直接将JavaScript加在文件中，而是用一个JS文件代替的话，那你可以在HTML文件中INCLUDE下面的文件：
文件：/src/scripts.js
function sayHelloWorld() {
alert("Hello World, from JavaScript");
}
/html-template/index.template.html中添加：
<script src="scripts.js" language="JavaScript"></script>
<script src="scripts.js" language="JavaScript"></script>
上面的很不错，但是如果想在JavaScript函数中传递参数呢？考虑一下下面的JavaScript函数：
// JavaScript
function sayString(str) {
alert(str);
}
上面的JavaScript函数有一个参数str，在JavaScript的alert()函数中显示。如果你想从ActionScript传一个参数给自己的函数sayString()，简单的像下面这样传一个额外的参数给静态ExternalInterface.call() 函数：
// ActionScript 3.0
private function callJavaScript():void {
ExternalInterface.call("sayString", "Hello World, from ActionScript");
}
你的下一个问题可能会是：“这看起来很不错，但是是否真的需要创建一个JavaScript的函数，而它仅仅封装了一个alert事件”？的确，对于这样简单的，我们可以直接删掉前面的sayString()，我们可以简单的写为这样：
// ActionScript 3.0
private function callJavaScript():void {
ExternalInterface.call("alert", "Hello World, from ActionScript");
}

Flex中利用ExternalInterface的API调用

热点推荐