### Flex与JavaScript交互详解
#### 一、引言
随着Web技术的发展，不同语言之间的通信变得尤为重要。在Flex与HTML的结合中，Flex通常作为富客户端应用，而JavaScript则负责处理网页逻辑。为了实现二者之间的无缝对接，Adobe提供了ExternalInterface接口，它允许Flex中的ActionScript与网页中的JavaScript进行交互。本文将详细介绍如何使用ExternalInterface接口实现Flex与JavaScript之间的相互调用，并给出具体的示例代码。
#### 二、Flex调用JavaScript方法
在Flex中调用JavaScript是一种常见的需求，这使得Flex能够利用网页中JavaScript的强大功能，例如修改DOM元素、控制网页行为等。通过`ExternalInterface.call()`方法，Flex可以轻松地执行JavaScript函数并获取其返回值。
##### 2.1 ExternalInterface.call() 方法
`ExternalInterface.call()` 是一个非常实用的方法，用于在Flex中执行JavaScript函数。该方法的基本语法如下：
```actionscript
flash.external.ExternalInterface.call(function_name:String[, arg1, ...]:*):Object;
```
其中：
- `function_name`：要调用的JavaScript函数名称。
- `arg1, ...`：传递给JavaScript函数的参数。
**示例代码**：
假设HTML页面中定义了一个名为`changeDocumentTitle`的JavaScript函数，用于修改网页标题。
HTML页面代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>Original Title</title>
<script type="text/javascript">
function changeDocumentTitle(newTitle) {
document.title = newTitle;
return "Title changed successfully!";
}
</script>
</head>
<body>
<object id="myFlexApp" data="FlexApplication.swf" width="640" height="480"></object>
</body>
</html>
```
Flex应用代码：
```actionscript
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.external.*;
public function changeTitle():void {
var result:String = ExternalInterface.call("changeDocumentTitle", "New Title");
trace(result); // 输出: "Title changed successfully!"
}
]]>
</mx:Script>
<mx:Button label="Change Title" click="changeTitle()" />
</mx:Application>
```
#### 三、JavaScript调用Flex方法
除了Flex调用JavaScript外，有时也需要从JavaScript中调用Flex中的方法。这可以通过将ActionScript方法注册为JavaScript可调用的函数来实现，即使用`ExternalInterface.addCallback()`。
##### 3.1 ExternalInterface.addCallback() 方法
`ExternalInterface.addCallback()`方法允许在Flex中注册一个ActionScript方法，使其成为JavaScript可调用的函数。该方法的基本语法如下：
```actionscript
ExternalInterface.addCallback(function_name:String, closure:Function):void;
```
其中：
- `function_name`：在HTML页面中JavaScript调用的方法名称。
- `closure`：要调用的ActionScript方法。
**示例代码**：
假设Flex应用中定义了一个名为`asFunc`的ActionScript函数。
Flex应用代码：
```actionscript
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import flash.external.*;
public function asFunc():String {
return "Hello from Flex!";
}
public function initApp():void {
ExternalInterface.addCallback("flexFunctionAlias", asFunc);
}
]]>
</mx:Script>
</mx:Application>
```
HTML页面代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>Flex-JS Interaction</title>
<script type="text/javascript">
function callFlexMethod() {
var result = myFlexApp.flexFunctionAlias();
alert(result); // 输出: "Hello from Flex!"
}
</script>
</head>
<body>
<object id="myFlexApp" data="FlexApplication.swf" width="640" height="480"></object>
<button onclick="callFlexMethod()">Call Flex Method</button>
</body>
</html>
```
#### 四、总结
通过以上介绍，我们可以看到`ExternalInterface`类提供了强大的功能，不仅能够实现Flex与JavaScript之间的相互调用，还能增强Flex应用与HTML页面之间的交互性。无论是从Flex调用JavaScript还是从JavaScript调用Flex，都可以通过简单的API调用来实现，极大地扩展了Flex应用的功能范围。
此外，在实际开发过程中，还需要注意不同浏览器环境下的兼容性问题以及安全性问题，确保应用程序能够在各种环境下稳定运行。
lollipop4092012-11-06搞了半天，我这的项目好像跟这个不一致...写的地方不一样，不过这个应该是可以的
