Flex3与页面JavaScript的相互调用

 日前做项目，需要把页面的JS代码抽出来放到一个.js文件中，由于flex程序是以div+SWFObject的方式嵌入到页面的，为了达到目标网站只需要引用一个.js文件即实现引用项目工程的目的，所以也要把SWFObject的代码放到.js文件中。

 

思路是用document.write()把引用swf文件的代码写进页面，然后把flex要调用的js函数都放到.js文件中

 

很快，就迁移完毕了。测试ing...

 

想不到的是，flex中用ExternalInterface.call("methodName",params);调JS函数缺没有返回值，用alert("a")弹出一下，果然没有调用到。这是为什么呢？难道把SWF用document.write的方式加入到页面后权限降低了？

 

放狗找了一下，似乎大家的调用都很正常……唉……人生最痛苦的事情莫过于此了。

 

突然想到infoq的一些连接显示的是类似javascript:void(0)的字样，于是乎，我想到了用flex的URLRequest调用页面的JS。

立刻尝试

 

flex中：

var req:URLRequest = new URLRequest("javascript:test('hello')"); navigateToURL(req,"_self");

 

在JS中：

function test(str){ alert("你好" + str); return "world"; }

 

浏览器弹出对话框，里面的文字显示也正常。

这说明用URLRequest调用是没问题的。

但是……浏览器却跳转了，页面显示world。

很明显，不可以单纯地这么调。

 

怎么办呢？翻了一下flex的文档，原来ExternalInterface有个addCallBack的方法，使用它可以建一个JS的回调函数

使用方法如下：

ExternalInterface.addCallBack("returnValue",returnValue);//第一个参数是开放给JS的函数名，第二个参数是对应的AS方法。

 

flex中：

public function invokeJavaScript(details:String):void{ var JavaScriptRequest:URLRequest = new URLRequest("javascript:" + details); navigateToURL(JavaScriptRequest,"_self"); } public function returnValue(value:String):void{ this.value = value; } private function testASJS():void{ invokeJavaScript("test('seal','老胡')"); }

 

js中：

function thisMovie(flexName) { if (navigator.appName.indexOf("Microsoft") != -1) { return window[flexName]; } else { return document[flexName]; } } function sendToActionScript(flexName,value) { thisMovie(flexName).returnValue(value); } function test(flexName,param1){ sendToActionScript(flexName,"你好"+param1); }

 

thisMovie()是根据swfobject的id获取flex程序实例；

sendToActionScript()代替的是js中的return语句。

 

分别在IE6、IE8、Chrome、Firefox下测试，通过。