`
ch_kexin
  • 浏览: 897415 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

AS3和JS互相调用的小技巧【二】

 
阅读更多
引用
AS3和JS的互相调用网上一搜能搜到很多,我确实也是这么做的。然而结果却并非令人满意,大部分都是抄子chm帮助手册,或者是叙述得不明白。于是我又手痒了,写篇详细易读的出来,连带分享一个防止缓存的小技巧。

在这里我要先描述一下功能的需求:写死swf文件,读取xml的配置信息,仅靠修改页面上的js代码来改动所需要的xml文件url,并防止缓存。

---

第一步,建立flash as3文件,之后它就不需要改动了,只要编写它的文档类并发布就行。这里我将.fla文件命名为Test.fla,文档类关联为Test.as。

首先我们来展示下AS3中调用JS的方法,这是最简单的事情,简单到只需一句话便可。

AS3的Test.as文档类:

package {
  import flash.display.Sprite;
  import flash.external.ExternalInterface;
 
  public class Test extends Sprite {
    public function Test() {
      callJavaScriptFunction();
    }
   
    private function callJavaScriptFunction():void {
      if(ExternalInterface.available) {
        ExternalInterface.call("sayHello", "army");
      }
    }
  }
}


发布页面中的JS代码:

function sayHello(name) {
  alert("hello, " + name);
}


as代码很简单,文档类Test继承Sprite,构造函数中执行定义的callJavaScriptFunction()方法。先要说明下ExternalInterface这个类,它在flash.external包下,官方的解释是“在 ActionScript 和 Flash Player 的容器之间实现直接通讯的应用程序编程接口,例如,含有 JavaScript 的 HTML 页。”,可以说是标准的通信接口,只要是和JS互相调用,都要用到它。

在callJavaScriptFunction()方法中,先是判断ExternalInterface.available属性,当外部接口可调用时,执行ExternalInterface类的call方法,它接收若干个参数。第一个是调用的js方法名,后面依次是传给所调用js方法的参数。在这里ExternalInterface.call("sayHello", "army")就相当于执行了js代码中的sayHello("army")方法。如你所见,页面中的确弹出了一个窗口,内容正是传过来的"army"。

需要注意的是,js代码段必须写在嵌入的swf段前面,因为这样才能确保执行之前js全部载入了,否则的话可能会出现无法执行的情况。

---

接下来我们来看看从JS中调用AS的方法。这里我先提个问题:由于放在网络上,swf文件的下载时间是个未知数,如何才能确保js调用as的时候swf已经加载完成了呢?

我所使用的是一个小技巧:依旧是js片段写在swf前面,先在swf里面调用js方法,然后所调用的js方法里再返回去调用as的方法。这样就可以确保swf加载完成并能顺利执行了,整个过程如下:

js片段首先被浏览器读取并加载 =》 浏览器读取swf文件直至完成 =》 swf调用js的方法 =》 被调用的js方法中去调用swf中的as方法。

AS3的Test.as文档类:

package {
  import flash.display.Sprite;
  import flash.external.ExternalInterface;
  import flash.text.TextField;
 
  public class Test extends Sprite {
    public function Test() {
      callJavaScriptFunction();
    }
   
    private function callJavaScriptFunction():void {
      if (ExternalInterface.available) {
        ExternalInterface.addCallback("callAsFunction", onCallBackHandler);
        ExternalInterface.call("callBackBridge");
      }
    }
   
    private function onCallBackHandler(s:String):void {
      var textField:TextField = new TextField();
      textField.text = s;
      addChild(textField);
    }
  }
}


发布页面中的JS代码:

function getSwfInstance(movieName) {
  if (navigator.appName.indexOf("Microsoft") != -1) {
    return window[movieName];
  } else {
    return document[movieName];
  }
}
function callBackBridge() {
  getSwfInstance("Test").callAsFunction("Hello, army!");
}


页面html代码:

<noscript>
  <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="725" height="350" id="VideoCenter" align="center">
  <param name="allowScriptAccess" value="sameDomain" />
  <param name="allowFullScreen" value="false" />
  <param name="movie" value="VideoCenter.swf" />
  <param name="quality" value="high" />
  <param name="bgcolor" value="#ffffff" />
  <embed src="VideoCenter.swf" quality="high" bgcolor="#ffffff" width="725" height="350" name="VideoCenter" align="center" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
  </object>
</noscript>


为了使大家思路清晰,我们依照上面的过程一步步讲解:

1.js片段首先被浏览器读取并加载
2.浏览器读取swf文件直至完成

这两步没啥好说的,浏览器打开页面就会读取,不关我们的事情。

3.swf调用js的方法

我们看到Test.as中的构造函数依旧调用了callJavaScriptFunction()方法,不过这个方法已有所改变。先是判断ExternalInterface.available属性,然后addCallback()注册一个监听器,再调用js的callBackBridge()方法。
注意监听器必须先注册,这个监听器就是为了js回调as时而注册的,当回调发生时,这个监听器就会被激活,进而执行监听的方法。在这里我们监听js的callAsFunction()方法,并设定回调方法为as的onCallBackHandler()。

4.被调用的js方法中去调用swf中的as方法

由于swf里调用了js的callBackBridge()方法,因此会执行它。callBackBridge()方法内部先是用getSwfInstance()方法取得页面中的swf对象(根据浏览器不同而取得方法不同),然后调用取得对象的callAsFunction()方法,并传递了参数。
由于js中callAsFunction()方法被调用,因此as中注册的监听器监听到了方法名"callAsFunction",并把它转到回调函数onCallBackHandler()上。因此js中执行callAsFunction("Hello, army!")就相当于as中执行了onCallBackHandler("Hello, army!")一样。
结果不出所料,as的onCallBackHandler("Hello, army!")方法被执行,在swf上生成一个文本片段,片段内容正是传递过来的参数"Hello, army!"。

---

结尾的地方我要分享一个防止缓存的小技巧,也就是文章开头所说的功能需求。

通过as调用js方法,再让js回调as方法的这么一个办法,我们可以写死swf文件,通过修改页面中的js代码参数来让swf读取不同的xml配置文件。如果你看懂了上面的说明并亲自动手实践成功了,那么只需做小小修改便能完成这个需求。

接下来的问题是,假如我的xml文件名不想改动,怎么样才能防止缓存呢?

一种办法就是在as的urlloader中读取urlrequest时在xml文件末尾加上随机数,这是自动的办法;另一种就是手动修改js回调函数中的参数,在.xml文件后面加上唯一的随机参数,如:config.xml?1。每更新一次xml文件,就将那个参数+1,如此便能手动防止缓存。

值得一提的是,urlrequest在本地测试时对后面的参数会报错,说找不到文件,放在服务器上它便能够被解析了。


分享到:
评论

相关推荐

    Flex中的小技巧备忘

    ### Flex中的小技巧备忘 在Flex开发过程中,掌握一些实用的小技巧可以帮助开发者更高效地完成项目,并提高代码质量。本文将详细介绍四种与Flex相关的实用技巧。 #### 技巧一:复制文本到剪贴板 在某些场景下,...

    javascript操作ps

    本文档旨在详细介绍如何利用JavaScript来操作Adobe Photoshop CS6,并提供一些实用案例和技巧。 #### 二、JavaScript在Photoshop中的基础概念 ##### 2.1 脚本环境 Adobe Photoshop CS6为JavaScript提供了丰富的API...

    【JavaScript源代码】React 小技巧教你如何摆脱hooks依赖烦恼.docx

    ### React小技巧:结合`useState`与`useRef`应对Hooks依赖烦恼 #### 场景描述 在React项目中,经常遇到如下代码片段: ```javascript const [watchValue, setWatchValue] = useState(''); const [otherValue1, ...

    as3-video-test:我的 AS3 视频小测试的存储库

    在JavaScript部分,虽然主要工作通常由AS3完成,但有时会用JavaScript与Flash进行通信,例如使用SWFObject来嵌入Flash内容,或者通过ExternalInterface接口使AS3代码能够调用JavaScript函数,从而实现更灵活的交互。...

    greensock开发包(全)

    4. **兼容性**:GreenSock不仅适用于AS3,还有针对HTML5、JavaScript和其他平台的版本,方便跨平台开发。 5. **社区支持**:GreenSock有一个活跃的开发者社区,提供了丰富的资源、示例和解决方案,使得学习和解决...

    JavaScript调试技术(二).doc

    本文将深入探讨如何在集成开发环境MyEclipse中进行JavaScript的调试工作,特别是针对标题"JavaScript调试技术(二)"所涉及的内容进行详细解析。 首先,我们需要一个合适的环境来支持JavaScript的调试。在本例中,...

    javascript中关于&& 和 || 表达式的小技巧分享|javascript-70265.pdf

    总结,理解并熟练运用 `&&` 和 `||` 的这些小技巧,可以帮助你写出更简洁、可读性更强的JavaScript代码。它们在处理默认值、条件判断以及简化逻辑流程等方面都能发挥重要作用。在日常编程中,这些技巧尤其适用于函数...

    几个 ASP.NET 小技巧

    本文将介绍两个 ASP.NET 开发中的实用小技巧:如何使用 JavaScript 调用服务器端的方法,以及如何在 GridView 编辑状态下获取单元格的值。 首先,让我们来看一下如何用 JavaScript 调用 ASP.NET 服务器端的方法。在...

    PHP小技巧之JS和CSS优化工具Minify的使用方法

    合并和压缩JavaScript(JS)及层叠样式表(CSS)文件是实现这一优化的有效策略。本文将介绍如何使用PHP实现多个JS和CSS文件的合并与压缩,以及如何使用名为Minify的开源工具来达到相同的目的。 ### PHP实现合并和...

    Javascript调试之console对象——你不知道的一些小技巧

    综上所述,掌握这些`console`对象的小技巧,不仅可以提升我们的调试效率,还能使我们编写出更高效、更可维护的JavaScript代码。在实际工作中,善用这些方法能够极大地提高开发和调试的质量。希望本文能帮助到各位...

    ASP.NET 小技巧(2个)

    ### 技巧一:JavaScript调用服务器端方法 在ASP.NET AJAX环境中,有时我们需要在客户端的JavaScript中触发服务器端的方法执行。常规的PageMethod虽然方便,但静态方法无法访问当前页面的控件状态,限制了其实用性。...

    ActionScript3.0开发人员指南

    - **使用着色器**:详细解释如何在AS3中调用PixelBender着色器,以及如何将处理结果应用到显示对象上。 #### 第16章 使用影片剪辑 影片剪辑是Flash和AS3中的一个重要组成部分,用于组织和控制动画序列。 - **影片...

    微信小程序实训视频-2.rar

    3. **小游戏框架与语法**:微信小游戏采用JavaScript语言,并提供了特定的小游戏框架,如WXML和WXSS用于界面布局,JSBridge用于微信API调用。学习者需要掌握这些框架的语法和特性。 4. **小游戏设计与策划**:了解...

    Powershell小技巧之使用Jint引擎在PowerShell中执行Javascript函数

    Jint不会把Javascript编译成.Net字节码,所以它非常适用于脚本小且运行起来速度快的工程,或者运行在不同平台上的脚本。 PowerShell调用 拿到Dll根据-Path参数直接使用Add-Type命令即可: function Invoke-JSAdd ($...

    实用Javascript调试技巧分享(小结)

    在JavaScript的调试过程中,掌握高效的调试技巧是提升开发效率的关键。传统的`alert`方法虽然简单,但存在诸多限制,如只能打印字符串、阻塞UI线程等,因此并不推荐使用。相反,`console`对象提供了丰富的API,可以...

    JavaScript数字和字符串转换示例

    本文将深入探讨JavaScript中数字转字符串和字符串转数字的各种方法,以及一些取整的技巧。 1. **数字转换为字符串** a. **简单连接**:最直观的方式是通过加号`+`将数字与空字符串连接起来,这会自动将数字转换为...

    javascript 保存文件到本地实现方法

    在JavaScript中,保存文件到本地通常涉及到用户交互和浏览器安全限制。由于JavaScript是客户端脚本语言,它不能直接访问用户的文件系统,以防止恶意代码的潜在风险。然而,通过一些技巧,可以诱导用户以安全的方式...

    javascript实现动态改变层大小的方法

    JavaScript是一种广泛用于网页和网络应用的脚本语言,它允许我们与用户进行交互,并能动态地改变网页内容。在这个实例中,我们将深入探讨如何使用JavaScript来动态改变HTML元素(特别是层,即`div`)的大小。 首先...

Global site tag (gtag.js) - Google Analytics