总结Flex与浏览器交互

最新推荐文章于 2024-10-30 18:24:25 发布
最新推荐文章于 2024-10-30 18:24:25 发布
阅读量105 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/nianshi/archive/2010/11/24/1886682.html
版权

在用flex做Web应用时为了扩展应用程序功能，势必会更多的同浏览器进行交互，这样就会用到下面介绍的知识
1、在Flex中实现URL 跳转(使用flash.net.navigateToURL()方法如：)
   view plaincopy to clipboardprint?
/*
     * param1: 要跳转的URL
     * param2: 跳转方式 _blank /_self
     */
    navigateToURL(new URLRequest("http://blog.csdn.net/xingjunli"),"_blank");
/*
     * param1: 要跳转的URL
     * param2: 跳转方式 _blank /_self
     */
    navigateToURL(new URLRequest("http://blog.csdn.net/xingjunli"),"_blank");
2、使用FlashVars传替换参数（使用Application.application.parameters属性）
    页面嵌入SWF文件代码（我们可以通过JS动态来设置FlashVars信息已达到数据交互的目的）
              view plaincopy to clipboardprint?
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="mySwf">  
                <param name="movie" value="main.swf" />  
                <param name="quality" value="high" />  
                <param name="bgcolor" value="#869ca7" />  
                <param name="allowScriptAccess" value="sameDomain" />  
        <param name="FlashVars" value="UserName=Andy_liu&Age=18&Address=HongKong" />  
            </object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="mySwf">
                <param name="movie" value="main.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#869ca7" />
                <param name="allowScriptAccess" value="sameDomain" />
        <param name="FlashVars" value="UserName=Andy_liu&Age=18&Address=HongKong" />
            </object>
        Flex中获取参数代码:
           view plaincopy to clipboardprint?
private function onFlashVars(e:MouseEvent):void //获取页面参数  
        {  
            var parameters:Object = Application.application.parameters;  
            labURL.text = Application.application.url.toString();            // http://localhost:8889/main.swf  
            var param1:String = parameters.UserName;                    // Andy_liu  
            var param2:int = parseInt(parameters.Age);                    // 18  
            var param3:String = parameters.Address;                    // HongKong  
            /*
            txtParam1.text = param1;
            txtParam2.text = String(param2);
            txtParam3.text = param3;
            */
             
        }
private function onFlashVars(e:MouseEvent):void //获取页面参数
        {
            var parameters:Object = Application.application.parameters;
            labURL.text = Application.application.url.toString();            // http://localhost:8889/main.swf
            var param1:String = parameters.UserName;                    // Andy_liu
            var param2:int = parseInt(parameters.Age);                    // 18
            var param3:String = parameters.Address;                    // HongKong
            /*
            txtParam1.text = param1;
            txtParam2.text = String(param2);
            txtParam3.text = param3;
            */
          
        }
3、在Flex中调用JavaScript函数
    先在页面中完成js function(注在Flex中只能调用当前页面引入的JS函数)
   view plaincopy to clipboardprint?
function ShowUserInfo(name,age,address)  
     {  
        alert("Name:" + name+"\n" + "Age:" + age + "\n" +"Address"+address);  
        return "Call Successful!"
     }
function ShowUserInfo(name,age,address)
     {
        alert("Name:" + name+"\n" + "Age:" + age + "\n" +"Address"+address);
        return "Call Successful!"
     }
     Flex中调用方法并获取JS function返回值（ 使用ExternalInterface.call()方法）：
    view plaincopy to clipboardprint?
private function onCallJS(e:MouseEvent):void
    {  
        /*
         * param1:当前页JS function 方法名
         * param...传递的参数0-N个
         */
        var resultValue:String = ExternalInterface.call("ShowUserInfo",txtParam1.text,txtParam2.text,txtParam3.text);  
        //resultValue = Call Successful!  
    }
private function onCallJS(e:MouseEvent):void
    {
        /*
         * param1:当前页JS function 方法名
         * param...传递的参数0-N个
         */
        var resultValue:String = ExternalInterface.call("ShowUserInfo",txtParam1.text,txtParam2.text,txtParam3.text);
        //resultValue = Call Successful!
    }
4、在JavaScript中调用ActionScript函数
    页面中调用的JS 函数
   view plaincopy to clipboardprint?
function CallFlexMethod()  
     {  
        var swf="mySwf";  
        var container;  
        //alert(navigator.appName);  
        if(navigator.appName.indexOf("Microsoft")>=0)  
        {  
            container = document;  
        }  
        else
        {  
            container = window;  
        }  
        container[swf].flexFunction1();                    //无参方法  
        container[swf].flexFunction2("myHtmlRequest!");//参数传递方法  
        alert(container[swf].flexFunction3());            //含返回值方法  
     }
function CallFlexMethod()
     {
        var swf="mySwf";
        var container;
        //alert(navigator.appName);
        if(navigator.appName.indexOf("Microsoft")>=0)
        {
            container = document;
        }
        else
        {
            container = window;
        }
        container[swf].flexFunction1();                    //无参方法
        container[swf].flexFunction2("myHtmlRequest!");//参数传递方法
        alert(container[swf].flexFunction3());            //含返回值方法
     }

     Flex中注册和调用执行的方法：
     view plaincopy to clipboardprint?
//重要必须在Flex中执行如下注册 才能在JS中调用  
    private function registerCallBacks():void
    {  
        ExternalInterface.addCallback("flexFunction1",jsCallBack1);  
        ExternalInterface.addCallback("flexFunction2",jsCallBack2);  
        ExternalInterface.addCallback("flexFunction3",jsCallBack3);  
    }  
    private function jsCallBack1():void
    {  
        Alert.show("Call First Flex Method!");  
    }  
    private function jsCallBack2(params:*):void
    {  
        Alert.show("Call Method2:" + String(params));  
    }  
    private function jsCallBack3():String  
    {  
        return Math.random().toString();     
    }
//重要必须在Flex中执行如下注册 才能在JS中调用
    private function registerCallBacks():void
    {
        ExternalInterface.addCallback("flexFunction1",jsCallBack1);
        ExternalInterface.addCallback("flexFunction2",jsCallBack2);
        ExternalInterface.addCallback("flexFunction3",jsCallBack3);
    }
    private function jsCallBack1():void
    {
        Alert.show("Call First Flex Method!");
    }
    private function jsCallBack2(params:*):void
    {
        Alert.show("Call Method2:" + String(params));
    }
    private function jsCallBack3():String
    {
        return Math.random().toString();  
    }
5、BrowserManager管理组件应用
     BrowserManager 是一个 Singleton 管理器，用于充当浏览器和应用程序之间的代理。使用它可以访问浏览器地址栏中的 URL，这与访问 JavaScript 中的 document.location 属性类似。当 url 属性发生更改时调度这些事件。然后侦听器可以响应、更改该 URL 或阻止其它对象获取此事件。
      获得bm实例：
    view plaincopy to clipboardprint?
private var bm:IBrowserManager = BrowserManager.getInstance();
private var bm:IBrowserManager = BrowserManager.getInstance();
      a、获取URL传递的参数：
   view plaincopy to clipboardprint?
private function getBrowserValue():void
    {  
        //URL = "http://localhost/browser/main.html#name=peter;age=25;address=shenzhen china"  
        var o:Object = URLUtil.stringToObject(bm.fragment);  
        txtURLName.text = o.name;            // peter  
        txtURLAge.text = o.age;                // 25  
        txtURLAddress.text = o.address;        // shenzhen china  
    }
private function getBrowserValue():void
    {
        //URL = "http://localhost/browser/main.html#name=peter;age=25;address=shenzhen china"
        var o:Object = URLUtil.stringToObject(bm.fragment);
        txtURLName.text = o.name;            // peter
        txtURLAge.text = o.age;                // 25
        txtURLAddress.text = o.address;        // shenzhen china
    }
    b、获取浏览器信息(请求URL：“http://localhost:8889/main.html#name=peter;age=25;address=shenzhen%20china”)
       view plaincopy to clipboardprint?
private function onBrowserManager(e:MouseEvent):void
        {  
            txtBMOutPut.text += "Full URL: \n" + bm.url + "\n\n";  
            txtBMOutPut.text += "Base URL: \n" + bm.base + "\n\n";  
            txtBMOutPut.text += "URL Fragment URL: \n" + bm.fragment + "\n-----------\n";  
             
            var o:Object = URLUtil.stringToObject(bm.fragment);  
            txtBMOutPut.text += "Object: \n" + ObjectUtil.toString(o) + "\n\n";  
            txtBMOutPut.text += "Name: \n" + o.name + "\n\n";  
            txtBMOutPut.text += "Age: \n" + o.age + "\n\n";  
            txtBMOutPut.text += "Address: \n" + o.address + "\n-----------\n";  
             
            txtBMOutPut.text += "URL Port: \n" + URLUtil.getPort(bm.url) + "\n\n";  
            txtBMOutPut.text += "URL Protocol: \n" + URLUtil.getProtocol(bm.url) + "\n\n";  
            txtBMOutPut.text += "URL Server: \n" + URLUtil.getServerName(bm.url) + "\n\n";  
            txtBMOutPut.text += "URL Server with Port: \n" + URLUtil.getServerNameWithPort(bm.url) + "\n-----------\n";  
            /* 执行结果:
            Full URL:
            http://localhost:8889/main.html#name=peter;age=25;address=shenzhen%20china
            Base URL:
            http://localhost:8889/main.html
            URL Fragment URL:
            name=peter;age=25;address=shenzhen%20china
            -----------
            Object:
            (Object)#0
              address = "shenzhen china"
              age = 25
              name = "peter"
            Name:
            peter
            Age:
            25
            Address:
            shenzhen china
            -----------
            URL Port:
            8889
            URL Protocol:
            http
            URL Server:
            localhost
            URL Server with Port:
            localhost:8889
            -----------
            */
        }
private function onBrowserManager(e:MouseEvent):void
        {
            txtBMOutPut.text += "Full URL: \n" + bm.url + "\n\n";
            txtBMOutPut.text += "Base URL: \n" + bm.base + "\n\n";
            txtBMOutPut.text += "URL Fragment URL: \n" + bm.fragment + "\n-----------\n";
          
            var o:Object = URLUtil.stringToObject(bm.fragment);
            txtBMOutPut.text += "Object: \n" + ObjectUtil.toString(o) + "\n\n";
            txtBMOutPut.text += "Name: \n" + o.name + "\n\n";
            txtBMOutPut.text += "Age: \n" + o.age + "\n\n";
            txtBMOutPut.text += "Address: \n" + o.address + "\n-----------\n";
          
            txtBMOutPut.text += "URL Port: \n" + URLUtil.getPort(bm.url) + "\n\n";
            txtBMOutPut.text += "URL Protocol: \n" + URLUtil.getProtocol(bm.url) + "\n\n";
            txtBMOutPut.text += "URL Server: \n" + URLUtil.getServerName(bm.url) + "\n\n";
            txtBMOutPut.text += "URL Server with Port: \n" + URLUtil.getServerNameWithPort(bm.url) + "\n-----------\n";
            /* 执行结果:
            Full URL:
            http://localhost:8889/main.html#name=peter;age=25;address=shenzhen%20china
            Base URL:
            http://localhost:8889/main.html
            URL Fragment URL:
            name=peter;age=25;address=shenzhen%20china
            -----------
            Object:
            (Object)#0
              address = "shenzhen china"
              age = 25
              name = "peter"
            Name:
            peter
            Age:
            25
            Address:
            shenzhen china
            -----------
            URL Port:
            8889
            URL Protocol:
            http
            URL Server:
            localhost
            URL Server with Port:
            localhost:8889
            -----------
            */
        }
        c、BrowserManager还包含其它一些浏览器的扩展方法如：bm.setTitle("新标题：正在培训!")修改页面标题等...参考 http://livedocs.adobe.com/flex/3/html/help.html?content=deep_linking_3.html
6、在Flex中通过实现mx.managers.IHistoryManagerClinet接口来实现自定义历史记录管理器
自定义textInput
view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>  
<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" text="Change Me!" implements="mx.managers.IHistoryManagerClient"
creationComplete="mx.managers.HistoryManager.register(this);" change="textChanged(event)">  
    <mx:Script>  
        <!--[CDATA[  
            import mx.managers.HistoryManager;  
            private function textChanged(e:Event):void
            {  
                HistoryManager.save();  
            }  
            public function saveState():Object  
            {  
                return {text:text};  
            }  
            public function loadState(state:Object):void
            {  
                var newState:String = state?state.text:"";  
                if(newState != text)  
                {  
                    text = unescape(newState);  
                }  
            }  
        ]]-->  
    </mx:Script>  
</mx:TextInput>
<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" text="Change Me!" implements="mx.managers.IHistoryManagerClient"
creationComplete="mx.managers.HistoryManager.register(this);" change="textChanged(event)">
    <mx:Script>
        <!--[CDATA[
            import mx.managers.HistoryManager;
            private function textChanged(e:Event):void
            {
                HistoryManager.save();
            }
            public function saveState():Object
            {
                return {text:text};
            }
            public function loadState(state:Object):void
            {
                var newState:String = state?state.text:"";
                if(newState != text)
                {
                    text = unescape(newState);
                }
            }
        ]]-->
    </mx:Script>
</mx:TextInput>
当我们在使用上面自定义的TextInput时会发现在浏览器URL中会动态创建修入如这样的一些信息“#app=a4e4&8211- text=asdfasdfasdfsd%20”故FLEX通过浏览器URL记录SWF文件中组件的变化已实现保存历史记录数据已实现历史记录管理！

转载于:https://www.cnblogs.com/nianshi/archive/2010/11/24/1886682.html

aiqixiao2017
关注
FLEX与页面交互总结
yangtang_newton的专栏
04-04 2588
（1）读取URL传入的参数：类似 test.html?name=jex&address=chengdu 地址中问号后面的参数对值。 思路：在Flex中，通过调用ExternalInterface的call方法，参数为要调用的JavaScript函数，并返回JS函数调用的结果。ExternalInterface.call("JavaScript函数");  在JS中，Window对象用来代表一个W
flex chrome浏览器调试出现空白的解决方法
10-26
Flex是一种基于ActionScript和MXML的开源框架，用于构建交互性强、动态的Web应用程序。然而，开发者在使用Chrome浏览器进行Flex应用调试时，可能会遇到显示空白的问题。本文将深入探讨这个问题的原因，并提供解决...
flex实现简单浏览器
11-28
flex实现简单浏览器,flex AIR中HTML控件实现了简单的网页浏览效果
flex4通过httpserver和php交互,总结Flex与浏览器交互
weixin_42627541的博客
03-17 85
在用flex做Web应用时为了扩展应用程序功能，势必会更多的同浏览器进行交互，这样就会用到下面介绍的知识1、在Flex中实现URL 跳转(使用flash.net.navigateToURL()方法如：)/** param1: 要跳转的URL* param2: 跳转方式 _blank /_self*/navigateToURL(new URLRequest("http://blog.csdn.net...
flex4与java_flex4与java交互
weixin_39750195的博客
02-21 117
基于FLEX+JAVA 开发企业应用的设计与研究 凌盛 1 王余旺 2 【摘要】...为什么使用 Flex 和 Spring Flex 技术本身和 Java 就有很强...HTTP 报文接口及客户端和服务器端交互原理 a. HTTP 定义的事务处理由以下四步组成: i. 建立连接: 例如我在浏览器里输入 http://cuishen.java,客户端......flex4 整合 MyEclipse...
Flex对浏览器的交互操作类
arjick的专栏
07-08 1825
flex通过相关独特的特性，可以和浏览器有相关的沟通，特地展示了相关的操作封装类package com.shine.framework.Browser { import com.shine.framework.core.util.ArrayMap; import flas
html调用flex方法,Flex与JavaScript交互中如何用Flex调用JavaScript
weixin_36182568的博客
06-08 202
本文和大家重点讨论一下Flex与JavaScript的交互：Flex调用JavaScript或者被JavaScript调用，在Flex中调用JavaScript最简单的方法是使用ExternalInterface()，可以使用此API调用任意JavaScript，传递参数，获得返回值，如果调用失败，Flex抛出一个异常。Flex与JavaScript的交互一、在JavaScript中调用Flex方...
flex与html交互和js调用
米老头的博客
05-09 900
Flex与Html交互获得参数 1. 在html页面包含swf     id="${application}" width="${width}" height="${height}"     codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
【浏览器硬件交互篇】浏览器js调用摄像头拍照
狼丶宇先森的网络科技空间
05-07 4677
如何使用浏览器来调用相机进行拍照
Flex对浏览器的交互操作类 .
俊哥
04-16 625
flex通过相关独特的特性，可以和浏览器有相关的沟通，特地展示了相关的操作封装类 view plain package com.shine.framework.Browser  {      import com.shine.framework.core.util.ArrayMap;            import flash.net.URLRequest;      im
flex与ajax交互、flex与javascript交互.docx
06-09
### Flex与Ajax交互、Flex与JavaScript交互 #### 一、引言 随着Web技术的发展，Flex作为一种基于Adobe Flash平台的应用开发框架，在企业级应用中曾经非常流行。它提供了丰富的用户界面构建工具，并能够与服务器端...
flex与JS交互示例
05-27
5. **实际应用**：Flex与JavaScript的交互广泛应用于网页中的数据交换、用户交互、页面导航等场景。例如，Flex可以用于复杂的计算或图形渲染，而JavaScript则负责处理DOM操作和页面逻辑。 在提供的示例"flexWithJS...
flex与flash的交互
03-28
总结来说，Flex与Flash的交互为开发人员提供了一种强大的工具集，可以构建出具有丰富视觉效果和高度互动性的Web应用。通过深入理解这两个平台的特性和交互机制，开发者能够充分发挥它们的优势，创造出令人印象深刻的...
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
最新发布
weixin_52173250的博客
10-30 1110
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
基于vue框架的的汇生活家居商城的设计与实现bdjlq（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
10-29 1291
项目功能：商品分类,商品信息,用户。
基于Mysql、JavaScript、PHP、ajax开发的MBTI性格测试网站（前端+后端）
2302_79553009的博客
10-29 1391
本项目旨在构建一个基于MBTI（迈尔斯-布里格斯性格分类指标）理论的在线平台——“16Personalities”。该平台利用PHP、MySQL、JavaScript等技术栈开发，旨在帮助用户更好地理解和运用MBTI理论来评估个人性格类型，并应用于职业规划、团队建设和人际交往等多个方面。用户端功能 包括账号注册与登录、在线性格测试、性格类型浏览、团队评估及在线交友等模块。用户可以通过完成性格测试来获得详细的MBTI性格分析，并通过平台提供的功能与其他具有不同性格类型的用户互动。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 643
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
ssm智慧社区电子商务系统+vue
weixin_44832324的博客
10-28 1248
系统能否进行正常工作，功能模块能否实现，程序代码是否有错误，这些都需要通过系统测试来进行判断，测试是程序开发中必不可少的步骤，就算系统一步不差的被开发出来了，但进行测试时总能发现一个之前从没遇到过的问题[26]。在系统开发的整个过程当中都需要不断进行系统测试，根据经验发现，前期的一个小问题，将会酿成后期的一个大问题，所以越早发现，越早解决，才能保证后续的编码、测试和设计能够顺利进行。目前，系统测试所使用的方法主要是黑盒测试，系统测试的目的包括：根据客户的需求来设计用户界面；
Flex与JavaScript交互：监听浏览器关闭事件
总结来说，这个技术方案利用了JavaScript的`onbeforeunload`事件结合Flash/Flex的`ExternalInterface`进行通信，当用户尝试关闭浏览器时，先在JavaScript层面触发Flex应用的特定方法，再由Flex应用执行相应的关闭...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值