flex与html交互和js调用

阅读量：2120 次

发布时间：2019-04-30

本文共 5447 字，大约阅读时间需要 18 分钟。

Flex与Html交互获得参数

1. 在html页面包含swf

id="${application}" width="${width}" height="${height}"

codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">

width="${width}" height="${height}" name="${application}" align="middle"

play="true"

loop="false"

quality="high"

allowScriptAccess="sameDomain"

type="application/x-shockwave-flash"

pluginspage="http://www.adobe.com/go/getflashplayer"

FlashVars="param1=one&param2=2&param3=3&param4=four"

</embed>

< /object>

这里关键是FlashVars="param1=one&param2=2&param3=3&param4=four"

这FlashVars把参数传给了swf文件

2. flex中函数private function onCreationComplete() : void{    var parameters : Object = Application.application.parameters;    var param1 : String = parameters.param1;    var param2 : int = parseInt( parameters.param2 );    var param3 : int = parseInt( parameters.param3 );    var param4 : String = parameters.param4;    output.text = "param1: " + param1 + "/n" +                  "param2: " + param2 + "/n" +                  "param3: " + param3 + "/n" +                  "param4: " + param4;}

在flex中用Application.application.parameters来获取上面所传的参数转自：http://blog.csdn.net/friendyi/archive/2008/07/15/2651777.aspx------------------------------------------------------------------------------------------------------------------

一、在JavaScript中调用Flex方法

在 Flex 应用中，需要在方法列表中添加指定的公用方法，这样Flex中的方法才能被JS调用到。在Flex中需要通过调用addCallback()可以把一个方法添加到此列表中。 addCallback将一个ActionScript的方法注册为一个JavaScript和VBScript可以调用的方法。

addCallback()函数的定义如下：

addCallback(function_name:String, closure:Function):void

function_name参数就是在Html页面中脚本调用的方法名。closure参数是要调用的本地方法，这个参数可以是一个方法也可以是对象实例。

举个例子：

01.
<mx:script>
02.
    import flash.external.*;
03.
    public functionmyFunc():Number { 
04.
        return83;
05.
    }
06.
    public functioninitApp():void { 
07.
        ExternalInterface.addCallback("myFlexFunction",myFunc);
08.
    }
09.
</mx:script>

那么在Html页面中，先获得SWF对象的引用，也就是用

1.
<object...id="MyFlexApp"></object>

声明的Swf的Id属性，比如说是MyFlexApp。然后就可以用以下方式调用Flex中的方法。

1.
<script language="JavaScript">
2.
    functioncallApp() { 
3.
        varx = MyFlexApp.myFlexFunction();
4.
        alert(x);
5.
    }
6.
</script>

1.
<inputonclick="callApp()"value="Test"type="button">

二、在Flex中调用 JavaScript

同样，我们也可以调用Html页面中的JavaScript，通过与JavaScript的交互，可以改变Style，调用远程方法。还可以将数据传递给Html页面，处理后再返回给Flex，完成这样的功能主要有两种方法：ExternalInterface()和navigateToUrl()。

在Flex中调用JavaScript最简单的方法是使用ExternalInterface()，可以使用此API调用任意JavaScript，传递参数，获得返回值，如果调用失败，Flex抛出一个异常。

ExternalInterface封装了对浏览器支持的检查，可以用available属性来查看。

ExternalInterface的使用非常简单，语法如下：

flash.external.ExternalInterface.call(function_name: String[, arg1, ...]):Object;

参数function_name是要调用的JavaScript的函数名，后面的参数是JavaScript需要的参数。

举个例子说明如何调用JavaScript函数

Flex应用中，添加如下方法：

01.
<mx:script>
02.
 
03.
<mx:application xmlns:mx="">
04.
    <mx:script>
05.
        import flash.external.*;
06.
    
07.
        public functioncallWrapper():void { 
08.
            varf:String = "changeDocumentTitle";
09.
            varm:String = ExternalInterface.call(f,"New Title");
10.
            trace(m);
11.
        }
12.
    </mx:script>
13.
    <mx:button label="Change Document Title"click="callWrapper()">
14.
</mx:button></mx:application></mx:script>

Html页面中有如下函数定义：

1.
<script language="JavaScript">
2.
    functionchangeDocumentTitle(a){ 
3.
        window.document.title = a;
4.
        return"successful";
5.
    }
6.
</script>

转自：http://www.idceye.com/index-blog-view-id216.html------------------------------------------------------------------------------------------------------------------------------------

Flex程序与包装页面（wrapper）通信方法小结

Flex通常作为一个web项目的一部分嵌入到一个web页中，因此Flex程序和web页面的通信就变得非常重要。

1） Flex提供了多种方法实现 Flex程序和封装页面的交互，主要有：flashVars属性，查询字符串参数，navigateToURL()方法，以及flash.external.ExternalInterface类。

2）

Flex程序获取环境信息： Application.application.url获取封装页面的URL，以及使用

@ContextRoot()

；以及可以通国 flash.system.Capacities获取到有关系统的一些信息，比如版本、语言、操作系统等；

3）

flashVars用来从外部封装页面向 Flex程序传送数据：

在封装页面传入参数值：AC_FL_RunContent(flashVars, “para1=value1&…&paran=valuen”)或者

</Object>

然后flex程序里通过 Application.application.parameters.para1获取参数值；

4）

ExternalInterface提供方法使 Flex程序和外部的封装页面可以相互调用对方的方法，外部接口类要受到域安全性设置（allowScriptAccess, allowNetworking）的约束。

先判断 ExternalInterface是否可用：

ExternalInterface.available;

flex调用 js：

ExternalInterface.call(funName, funPara1, …, funParaN)；

js调用 flex：

首先 flex里面用ExternalInterface.addCallback(“jsFunName”,asFun),将AS里面定义的函数赋予一个js里面调用的函数的名字jsFunName；

然后在 js里面用mySwf.jsFunName()调用flex里面提供的函数asFun；

ExternalInterface安全性：

一般来说 js和flex的访问局限于同一个域之内。

可以设置 <Object>和<Embed>的allowScriptAccess=”value”(value取值:never, always, sameDomain默认)来设置flex访问js的权限。

至于 js对于flex方法的访问只有flex里面通过addCallback的js才可以访问，对于跨域，可以试用allowDomain()函数设置。

5）

navigateToURL() 可以用来打开一个新的浏览器窗口，也可以用来flex和js之间的通信。比如 :

打开一个新窗口：

var = new URLRequest( );

navigateToURL(url, _blank);

这个函数也可以用来执行 js，例如：

var = new URLRequest(“javascript:window.close()”); 或者：

var urlLURLRequest = new URLRequest(“javascript:myFun(para1…paran)”)

myFun()函数是html页面的script部分定义的，函数参数一定要有引号！

navigateToURL(url, _self);

也可以用来发送 email：

var urlURLRequest = new URLRequest( );

navigateToURL(url, _blank);

转自：http://blog.csdn.net/arshoon/archive/2008/06/11/2533982.aspx

你可能感兴趣的文章

【托业】【新东方全真模拟】01~02-----P5~6

查看>>

【托业】【新东方全真模拟】03~04-----P5~6

查看>>

【托业】【新东方托业全真模拟】TEST05~06-----P5~6

查看>>

【托业】【新东方托业全真模拟】TEST09~10-----P5~6

查看>>

【托业】【新东方托业全真模拟】TEST07~08-----P5~6

查看>>

solver及其配置

查看>>

JAVA多线程之volatile 与 synchronized 的比较

Redis学习笔记（二）— 在linux下搭建redis服务器

查看>>

Redis学习笔记（三）—— 使用redis客户端连接windows和linux下的redis并解决无法连接redis的问题

查看>>

Intellij IDEA使用（一）—— 安装Intellij IDEA（ideaIU-2017.2.3）并完成Intellij IDEA的简单配置

查看>>

Intellij IDEA使用（二）—— 在Intellij IDEA中配置JDK（SDK）

查看>>

Intellij IDEA使用（三）——在Intellij IDEA中配置Tomcat服务器

查看>>

Intellij IDEA使用（四）—— 使用Intellij IDEA创建静态的web（HTML）项目

查看>>

Intellij IDEA使用（五）—— Intellij IDEA在使用中的一些其他常用功能或常用配置收集

查看>>

Intellij IDEA使用（六）—— 使用Intellij IDEA创建Java项目并配置jar包

查看>>

Eclipse使用（十）—— 使用Eclipse创建简单的Maven Java项目

查看>>

Eclipse使用（十一）—— 使用Eclipse创建简单的Maven JavaWeb项目

查看>>

Intellij IDEA使用（十三）—— 在Intellij IDEA中配置Maven

查看>>