flex如何调用js

Flex 调用 JavaScript 的方法主要有以下几种：ExternalInterface.call()、通过嵌入HTML执行JS、在Flex中创建JS函数并调用。在这些方法中，ExternalInterface.call()是最常用和最直接的方法。我们将详细解释如何使用ExternalInterface.call()来实现这一功能。

一、ExternalInterface.call() 方法

1.1 ExternalInterface 概述

ExternalInterface 是 Flash Player 提供的一个 API，允许 Flash 应用程序与包含它的 HTML 页面的 JavaScript 进行交互。通过这个 API，Flex 应用程序可以调用 JavaScript 函数，反之亦然。ExternalInterface.call() 方法用于从 Flex 调用 JavaScript 函数。

1.2 设置和调用

首先，确保你的 Flex 应用程序可以访问 ExternalInterface。你需要在 ActionScript 代码中导入 ExternalInterface 类：

import flash.external.ExternalInterface;

然后，你可以使用 ExternalInterface.call() 方法来调用 JavaScript 函数。例如：

if (ExternalInterface.available) {
    ExternalInterface.call("jsFunctionName", "parameter1", "parameter2");
} else {
    trace("ExternalInterface is not available.");
}

在上面的例子中，jsFunctionName 是你希望调用的 JavaScript 函数的名称，parameter1 和 parameter2 是传递给 JavaScript 函数的参数。

1.3 示例

假设你有以下 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex and JS Integration</title>
    <script type="text/javascript">
        function showAlert(message) {
            alert(message);
        }
    </script>
</head>
<body>
    <div id="flashContent">
        <!-- Flex SWF will be embedded here -->
    </div>
    <script type="text/javascript" src="swfobject.js"></script>
    <script type="text/javascript">
        swfobject.embedSWF("yourFlexApp.swf", "flashContent", "800", "600", "9.0.0");
    </script>
</body>
</html>

在你的 Flex 应用程序中，你可以这样调用 showAlert 函数：

import flash.external.ExternalInterface;
if (ExternalInterface.available) {
    ExternalInterface.call("showAlert", "Hello from Flex!");
} else {
    trace("ExternalInterface is not available.");
}

这样，当你在 Flex 应用程序中调用这段代码时，网页会显示一个包含 "Hello from Flex!" 的警告框。

二、通过嵌入HTML执行JS

2.1 使用 HTMLLoader

Flex 还可以使用 HTMLLoader 类将 HTML 内容嵌入到应用程序中，并通过 HTML 直接执行 JavaScript。HTMLLoader 是一个 AIR 类，所以这种方法只能在 Adobe AIR 应用程序中使用。

2.2 示例

首先，确保你的项目中包含以下导入：

import flash.html.HTMLLoader;
import flash.net.URLRequest;

然后，你可以创建并加载一个 HTML 文件：

var htmlLoader:HTMLLoader = new HTMLLoader();
htmlLoader.width = 800;
htmlLoader.height = 600;
htmlLoader.load(new URLRequest("yourHTMLFile.html"));
addChild(htmlLoader);

在 HTML 文件中，你可以包含 JavaScript 函数，并通过 HTMLLoader 执行这些函数。

三、在 Flex 中创建 JS 函数并调用

3.1 创建 JS 函数

有时候，你可能需要在 Flex 应用程序中动态创建 JavaScript 函数。你可以使用 ExternalInterface.addCallback() 方法将 ActionScript 函数暴露给 JavaScript 调用。

3.2 示例

首先，在 Flex 应用程序中定义一个 ActionScript 函数：

public function flexFunction(message:String):void {
    trace("Message from JavaScript: " + message);
}

然后，使用 ExternalInterface.addCallback() 将这个函数暴露给 JavaScript：

if (ExternalInterface.available) {
    ExternalInterface.addCallback("callFlexFunction", flexFunction);
} else {
    trace("ExternalInterface is not available.");
}

在 HTML 文件中，你可以这样调用这个函数：

<script type="text/javascript">
    function callFlex() {
        document.getElementById("yourFlexApp").callFlexFunction("Hello from JavaScript!");
    }
</script>

当你调用 callFlex 函数时，它会触发 Flex 应用程序中的 flexFunction 函数，并传递一个消息字符串。

四、通过事件和监听器实现交互

4.1 事件监听

除了直接调用函数外，你还可以通过事件和监听器机制来实现 Flex 和 JavaScript 之间的交互。这种方法适用于需要处理复杂交互和逻辑的场景。

4.2 示例

在 Flex 应用程序中，你可以定义一个自定义事件：

import flash.events.Event;
public class CustomEvent extends Event {
    public static const TYPE:String = "customEvent";
    public var data:Object;
    public function CustomEvent(type:String, data:Object = null, bubbles:Boolean = false, cancelable:Boolean = false) {
        super(type, bubbles, cancelable);
        this.data = data;
    }
    override public function clone():Event {
        return new CustomEvent(type, this.data, bubbles, cancelable);
    }
}

然后，在 Flex 应用程序中触发这个事件：

var event:CustomEvent = new CustomEvent(CustomEvent.TYPE, {message: "Hello from Flex!"});
dispatchEvent(event);

在 HTML 文件中，你可以添加一个事件监听器来捕获这个事件：

<script type="text/javascript">
    function setupEventListener() {
        var flexApp = document.getElementById("yourFlexApp");
        flexApp.addEventListener("customEvent", function(event) {
            var message = event.data.message;
            alert("Received message: " + message);
        });
    }
</script>

确保在 Flex 应用程序加载完成后调用 setupEventListener 函数：

<script type="text/javascript">
    window.onload = function() {
        setupEventListener();
    };
</script>

五、总结

通过以上方法，Flex 应用程序可以轻松与 JavaScript 进行交互。ExternalInterface.call() 是最常用和最直接的方法，但在某些情况下，使用 HTMLLoader 或 事件监听器 可能更适合。希望这些方法能帮助你在 Flex 开发中更好地调用和整合 JavaScript 功能。