Flex与JS(Javascript)相互调用
用FLASH CS3开发,或者在FLEX里建立AS项目开发,与FLEX里建立FLEX项目开发,在对于调用外部的问题,比如ExternalInterface类这个命令:结果一样吗?答案是不一样,这是个很奇怪的问题，其实是源于FLEX在建立的时候内部包含的东西很多,还加了个框架,如果你按照FLASH CS3里开发那样的命令，去调用外部JS,结果会很糟糕.应该说完全不同.
首先来看一下一个简单的CASE,先说FLASH CS3里怎么做,不过这种方法，我已经在http://www.niuc.net/post/206/里写过，很简单.OK,我按照上面那个qq的例子,做一个改变，就是我在网页初始后，就希望得到一个我在JS里写好的值,并且初始化完成后，在FLASH里直接显示.怎么做?
在网页代码里<object>里，加一个JS命令,onLoad="所要执行的程序".然后在里写那个需要执行的程序,比如
< body onLoad="pageInit()" >
然后在script里写上一个初始程序,我是按照以上那个QQ例子来做,那么就该写成
function pageInit(){
callAS3(1);
}
那么得到的结果是,在网页初始后,FLASH呈现的是穿上编号为1的那个衣服，而不是光着膀子.很简单，对吧,那么问题来了，如果按照同样的方法,在FLEX是否可以实现呢?那么我们来换一种例子来做，只是简单的传输一个字符.我们首先在FLEX里写:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()"> <mx:Script> <![CDATA[ import flash.external.*; public function initApp():void { ExternalInterface.addCallback ("newMessage",newMessage); } public function newMessage(s:String):void { t.text = s; } ]]> </mx:Script> <mx:Text id="t"/> </mx:Application>
这样就做好了一个FLEX接受端,可以接受来自外部callApp JS命令,并且把字符在ID为T的text里显示.那么接着写JS端的(需要在FLEX建立完成后，再在BIN里修改那个HTML文件):
<html>
<head>
<title>Test.html</title>
</head>
<body scroll='no'> <SCRIPT LANGUAGE="JavaScript">
function callApp() {
getSWF("TestSwf").newMessage(document.getElementById("newTitle").value);
}
function getSWF(movieName){
if (navigator.appName.indexOf("Microsoft") != -1){
return window[movieName]
}
else {
return document[movieName]
}
}
</SCRIPT> <h1>Test</h1> <form id="f1">
Enter a new Value: <input type="text" size="30" id="newTitle" >
<input type="button" name="btn" value="SEND" onClick="callApp()"> </form> <table>
<tr>
<td valign="top">
<object id="TestSwf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
height="200" width="400">
<param name="src" value="test.swf"/>
<embed name="TestSwf" src="test.swf"
pluginspage="http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash"
height="200" width="400"/>
</object>
</td>
</tr>
</table>
</body>
</html>
看这样就做好了一个很简单的在网页传输数据，并且在FLEX接收的程序了，那么我们继续玩点新花样，我需要在网页初始后,FLEX首先能够显示出我在网页里，或者JS里预加的值,比如:welcome什么的.怎么做?在一开头，我就用FLASH CS3写过,直接在object里放一个onload命令就可以了,但是FLEX能这样做吗?答案是否定的，很多人会被这个问题搞晕,那么到底该如何解决这个问题呢?
其实就是比以前复杂一点，就是多加几个小确认.由于解释起来太麻烦，我就把每行代码都注释一下,先放FLEX端口的Script里的代码,其他的都一样.
<mx:Script>
<![CDATA[
import flash.external.*;
//程序的初始化
public function initApp():void {
//监听ExternalInterface.available的Boolean值,一般都为TRUE,如果想知道更详细的情况请参阅帮助文档
if (ExternalInterface.available){
//这个值来自与isContainerReady(),而isContainerReady(),的值是来自ExternalInterface.call("isReady");
//这个命令,这个命令就是写在JS里的，等下我贴JS代码的时候会放上,如果JS里的值返回是true,那么继续下面的Callback命令.
var containerReady:Boolean = isContainerReady();
if (containerReady) {
Callback();
}
}else{
trace("Wrong Load!")
}
}
private function isContainerReady():Boolean{
var result:Boolean = ExternalInterface.call("isReady");
return result;
}
private function Callback():void {
//这里就简单多了，先addCallback好准备要接收的东西,然后call JS里的命令,以便从JS发送一个值回来,注意次序不要搞错，错了就会不成功
ExternalInterface.addCallback("newMessage",newMessage);
ExternalInterface.call("sendMessage");
}
public function newMessage(s:String):void {
t.text = s;
}
]]> </mx:Script>
下面是JS里的代码.同样也是SCRIPT里的代码，不过别忘了object 里要先写上onload="pageInit()"这个命令.
<SCRIPT LANGUAGE="JavaScript"> var jsReady = false;
//在预先设置jsReady这个值为false,然后在网页初始后，让其值为true;那么等FLEX在call isReady()这个命令后,会返回一个true值,这样FLEX里的程序才会继续执行. function pageInit(){ jsReady = true; }
function isReady(){ return jsReady; } //这是等FLEX执行到Callback()后,所发送过来的事件命令，那么就可以执行这个程序了.执行完成后，就会newMessage 过去到FLEX里，这样FLEX里就会得到一个数值,并把他显示出来. function sendMessage(){ getSWF("TestSwf").newMessage("Welcome"); } function callApp() { getSWF("TestSwf").newMessage(document.getElementById("newTitle").value); } function getSWF(movieName){ if (navigator.appName.indexOf("Microsoft") != -1){ return window[movieName] } else { return document[movieName] } } </SCRIPT>
在FLEX里要实现网页初始,并能显示一个预先设置好的值的确复杂,要是FLASH CS3里就方便了很多,其他细节还需要自己细细体会了，以下是源文件,由于安全域问题，可能你把源文件弄过去后，比较难调试.干脆直接拷贝代码到你自己建立的项目就可以了，然后再改HTML的代码.
