SWFObject基本用法实例分析

2023年6月11日上午3:41 • JavaScript

那么针对“SWFObject基本用法实例分析”的攻略，我会从以下几个方面着手进行详细讲解：

SWFObject基本介绍
SWFObject的引入
SWFObject的基本用法
实例分析
结束语

接下来会一步步讲解，希望对您有所帮助。

1. SWFObject基本介绍

SWFObject是一个用于嵌入Flash对象的JavaScript库，使用SWFObject可以避免因为浏览器差异导致Flash在某些浏览器上无法正常显示的问题。SWFObject是一种呈现对象的HTML和Flash替代方案，不仅能够为Flash提供交互行为，而且可以扩展通用的DOM API，使得有机会编写更智能的JavaScript代码。

2. SWFObject的引入

SWFObject是一个JavaScript库，我们可以通过以下方式将它引入到我们的网页中：

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>

3. SWFObject的基本用法

SWFObject的基本用法大致分为以下三步：

创建Flash对象的容器
配置Flash对象的参数
嵌入Flash对象

我们可以通过如下代码创建Flash对象的容器：

<div id="flashContent"></div>

接下来我们需要通过JS进行配置，代码如下：

var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#f0f0f0";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
// 如果没有flash插件，使用swfObject来替代
params.useExpressInstall = true;
var attributes = {};
attributes.id = "myId";
attributes.name = "myId";
attributes.align = "left";
swfobject.embedSWF("myContent.swf", "flashContent", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes);

以上代码的含义如下:

flashvars是传递给Flash文件的变量，以属性/值对的形式表示。
params是Flash对象的参数，例如影片质量，背景颜色等等。
attributes是Flash对象标签的属性，例如id、name、align等等。
swfobject.embedSWF则是将Flash对象嵌入到容器“flashContent”中的关键步骤。其中参数分别为Flash文件路径、容器ID、宽度、高度、最低Flash版本、Flash检测文件、Flash变量、Flash参数、Flash属性。

4. 实例分析

下面我们来看两个具体的实例：

实例1：简单嵌入Flash

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>嵌入Flash示例1</title>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
</head>

<body>
    <div id="flashContainer"></div>

    <script>
        var flashvars = {};
        var params = {};
        params.quality = "high";
        params.bgcolor = "#ffffff";
        params.allowscriptaccess = "sameDomain";
        params.allowfullscreen = "true";
        var swfVersionStr = "11.0.0";
        var swfUrlStr = "flash/movie.swf";
        swfobject.embedSWF(swfUrlStr, "flashContainer", "550", "400", swfVersionStr, "", flashvars, params);
    </script>
</body>

</html>

在浏览器中打开上面的代码，就可以看到一个简单的Flash动画。

实例2：使用ExpressInstall替代

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>嵌入Flash示例2</title>
    <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
</head>

<body>
    <div id="flashContainer"></div>

    <script>
        var flashvars = {};
        var params = {};
        params.quality = "high";
        params.bgcolor = "#ffffff";
        params.allowscriptaccess = "sameDomain";
        params.allowfullscreen = "true";
        // 如果没有flash插件，使用swfObject来替代
        params.useExpressInstall = true;
        var swfVersionStr = "11.0.0";
        var swfUrlStr = "flash/movie.swf";
        swfobject.embedSWF(swfUrlStr, "flashContainer", "550", "400", swfVersionStr, "", flashvars, params);
    </script>
</body>

</html>

以上代码中，我们增加了一个参数params.useExpressInstall = true。如果用户没有安装Flash插件，这个参数会调用ExpressInstall.swf文件来引导用户下载并安装Flash插件，而不会留下空白的动画。