Flex与JavaScript交互

早就再留意Flex与Js的交互方式了，网上看了就三两句代码就解决了，从前对此比较不屑，自认为什么时候想用了花个5分钟看看就搞定了。

今天终于静下来自己测试和整理了下，才发现其实要调试成功并没那么简单，这几行代码折腾了我大半天真是的。

下面我把我的测试代码和心得和大家分享下：

Js2Flex.mxml

view plain copy to clipboard print ?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" initialize="initApp()">
<mx:Script>
<!--[CDATA[
import mx.controls.Alert;
public function flexHelloWorld(param1:String, param2:String):String {
Alert.show("param1: " + param1 + "; param2:" + param2);
return "Hello " + param1 + param2;
}
public function initApp():void {
ExternalInterface.addCallback("flexHelloWorld", flexHelloWorld);
}
public function jspHello():void {
var s:String = ExternalInterface.call("hello", "Flex");
Alert.show(s);
}
]]-->
</mx:Script>
<mx:Button x="52" y="58" label="call javascript" click="jspHello()"/>
</mx:Application>

testSwf.html

view plain copy to clipboard print ?

<html>
<head>
<mce:script type="text/javascript" src="swfobject.js" mce_src="swfobject.js"></mce:script>
</head>
<body>
<div id="flashcontent">
This text is replaced by the Flash movie.
</div>
<br>
<input type=button value="Call Flex" onclick="callflex()"/>
<mce:script language="javascript"><!--
var so = new SWFObject("Js2Flex.swf", "flexObject", "640", "300", "7", "#336699");
so.write("flashcontent");
function hello(param) {
return "jsp Hello:" + param;
}
function callFlexFunction() {
var fl = document.getElementById("flexObject");
var x= fl.flexHelloWorld("Hello", "world");
}
function callflex()
{
callFlexFunction();
}
// --></mce:script>
</body>
</html>

其实交互主要是通过 Flex自带接口ExternalInterface的addCallback和call方法来实现的，一个是命名方法代理，一个是条用Js方法。然后通过swfobject.js自带的方法嵌入swf实现Flex和JavaScript的无缝交互

注意：一定要到网上下载swfobject.js，然后再<head>内导入，然后用new SWFObject()嵌入swf，用<html>的<object><embed>嵌入的swf无法传递参数，这个就是为什么我弄了大半天没调试成功的原因，这个原因还没弄明白，不过swf还是尽量用js来嵌入，这样更符合html标准。

还有就是如果把生成的swf更换目录然后本地调试会有安全沙箱问题，所以最好在服务器上调试。