Flex中利用ExternalInterface的API调用JavaScript函数的例子

By Minidxer | March 10, 2008

下面的例子展示了如何在Flex中利用ExternalInterface类和static的ExternalInterface.call()函数调用JavaScript函数。

下面是具体的例子以及源代码：


Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- http://blog.flexexamples.com/2008/03/09/calling-javascript-functions-from-your-flex-applications-using-the-externalinterface-api/ -->
  3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  4.         layout="vertical"
  5.         verticalAlign="middle"
  6.         backgroundColor="white">
  7.  
  8.     <mx:Script>
  9.         <![CDATA[
  10.             private function callJavaScript():void {
  11.                 ExternalInterface.call("sayHelloWorld");
  12.             }
  13.         ]]>
  14.     </mx:Script>
  15.  
  16.     <mx:Button label="Say 'Hello World'"
  17.             click="callJavaScript();" />
  18.  
  19. </mx:Application>

然后在HTML文件中，在<head>和</head>间添加下面的代码：

  1. <script language="JavaScript" type="text/javascript">
  2.     function sayHelloWorld() {
  3.         alert("Hello World, from JavaScript");
  4.     }
  5. </script>
下面是执行实例（可以右键察看源代码）：

如果你用的是Flex Builder,那可以编辑/html-template/目录下的“index.template.html” 文件。该文件是用来创建/bin-debug/和/bin-release/目录下的主HTML文件。如果你清空过你的整个工程，那可能会有区别。还有很重要的是修改index.template.html文件会让你覆盖原文件–如果修改了Flex SDK版本或者改变了工程的HTML封装（就像改变了“Use Express Install” 或者“Enable integration with browser navigation”.）。

如果你不是直接将JavaScript加在文件中，而是用一个JS文件代替的话，那你可以在HTML文件中INCLUDE下面的文件：

文件：/src/scripts.js

  1. function sayHelloWorld() {
  2.     alert("Hello World, from JavaScript");
  3. }

/html-template/index.template.html中添加：

  1. <script src="scripts.js" language="JavaScript"></script>
<script src="scripts.js" language="JavaScript"></script>

上面的很不错，但是如果想在JavaScript函数中传递参数呢？考虑一下下面的JavaScript函数：

  1. // JavaScript
  2. function sayString(str) {
  3.     alert(str);
  4. }

上面的JavaScript函数有一个参数str，在JavaScript的alert()函数中显示。如果你想从ActionScript传一个参数给自己的函数sayString()，简单的像下面这样传一个额外的参数给静态ExternalInterface.call() 函数：

  1. // ActionScript 3.0
  2. private function callJavaScript():void {
  3.     ExternalInterface.call("sayString", "Hello World, from ActionScript");
  4. }

你的下一个问题可能会是：“这看起来很不错，但是是否真的需要创建一个JavaScript的函数，而它仅仅封装了一个alert事件”？的确，对于这样简单的，我们可以直接删掉前面的sayString()，我们可以简单的写为这样：

  1. // ActionScript 3.0
  2. private function callJavaScript():void {
  3.     ExternalInterface.call("alert", "Hello World, from ActionScript");
  4. }

原文作者：Peter deHaan 翻译：minidxer

Topics: Flex | 3 Comments » | 1,194 views Tags: , , , ,

Related Post

3 comments | Add One

Trackbacks

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

赞助商链接

Categories

Archives

Blogroll