flex与javascript互相调用方法详解:
在flash里希望得到一个在javascript里写好的值,并且初始化完成后,在FLASH里怎么得到呢?.
首先在网页中的<Object>里,加一个JS命令,onLoad="所要执行的程序".然后在里写那个需要执行的程序,比如
< body onLoad="pageInit()" >
然后在script里写上一个初始程序,我是按照以上那个QQ例子来做,那么就该写成
然后在script里写上一个初始程序,我是按照以上那个QQ例子来做,那么就该写成
那么得到的结果是,在网页初始后,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>flex与javascript互相调用方法详解-php自学网</title> </head> <body scroll='no'> <SCRIPT type="text/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"> 标题: <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 里要先写上οnlοad="pageInit()"这个命令.
<SCRIPT type="text/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的代码.