Flex与Javascript相互调用
2011-08-22 17:41
155 查看
用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的代码.
首先来看一下一个简单的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的代码.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- flex 与javascript的相互调用
- Flex：JavaScript与ActionScript函数相互调用
- Flex与JS(Javascript)相互调用
- JavaScript 父子页面相互调用总结
- Flex中不使用FelxPrintJob通过ExternalInterface直接调用JavaScript利用浏览器本身的功能进行打印
- FLEX中调用JavaScript
- .Net中前台javascript与后台c#函数相互调用问题
- net中前台javascript与后台c#函数相互调用问题
- JavaScript和Android代码相互调用
- .net中前台javascript与后台c#函数相互调用问题
- UIWebView与JavaScript相互调用
- JavaScript与OC的相互调用
- Android中如何实现WebView与JavaScript的相互调用
- Silverlight和javascript的相互调用
- flex中调用javascript
- 在JavaScript中调用Flex方法
- as与js相互通信（flex中调用js函数）
- Android 和 javascript 之间交互（方法相互调用）
- asp.net前台javascript与后台c#相互调用
- iOS js oc相互调用（JavaScriptCore）