早就再留意Flex与Js的交互方式了,网上看了就三两句代码就解决了,从前对此比较不屑,自认为什么时 候想用了花个5分钟看看就搞定了。
今天终于静下来自己测试和整理了下,才发现其实要调试成功并没那么简单,这几行代码折腾了我大半天 真是的。
下面我把我的测试代码和心得和大家分享下:
Js2Flex.mxml
- <?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
- <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更换目录 然后本地调试会有安全沙箱问题,所以最好在服务器上调试。