65.9K
CodeProject 正在变化。 阅读更多。
Home

使用 SWFobject 的 Last.fm 小部件

n05robsta
starIconstarIconstarIconstarIconemptyStarIcon

4.00/5 (2投票s)

2009年3月2日

CPOL

3分钟阅读

viewsIcon

23668

downloadIcon

150

在这个例子中，我展示了使用 SWFobject 和 Flash 与 jQuery 逐步增强页面是多么容易。

引言

在这个例子中，我展示了使用 SWFobject 和 Flash 与 jQuery 逐步增强页面是多么容易。

小部件是将其他网站的内容快速放到您的页面上的好方法，但很多这些小部件都未能考虑到可访问性，甚至标记有效性。

任务

对于我自己的网站，我想使用一个 Last.fm 小部件来显示我的主页上最近播放的曲目。Last.fm 提供了一种简单的方法来从您的帐户创建任意数量的不同小部件 (http://www.last.fm/widgets)，然后只需将相应的代码粘贴到您的页面上。

选择使用图表小部件，这会创建一个糟糕的基于表格的布局，其中包含内联样式、图像和一个 Flash 文件。而且，最糟糕的是，标记是无效的。仔细查看创建的大量标记，我们真正需要的唯一部分是包含适当设置的 Flash 文件。

这里的诱惑可能是直接在我们的页面上写入一个 OBJECT 标签，然后就完成了，但这不符合可访问性指南，所以使用 SWFobject 稍微增加一些工作，我们可以得到一个更好的解决方案。

SWFobject

SWFobject 是一个基于 JavaScript 的检测例程，用于检查是否安装了适当版本的 Flash，然后将 Flash 影片加载到给定的占位符中。如果未安装正确版本的 Flash，它会提示您安装它。

如果我们将 SWFobject 检测与 jQuery 结合使用，我们可以首先检查 JavaScript 是否可用，如果不可用，则回退到基于标记的我们的小部件版本。这通常被称为渐进增强。

解决方案

首先，我们需要从 Goggle 代码存储库中获取 SWFobject JavaScript 库，将其包含在我们的网站 *scripts* 文件夹中，并在 HTML 页面的头部添加一个链接。

<script src="scripts/swfobject.js" type="text/javascript"></script>

接下来，让我们为我们的页面编写基本的标记。记住，我们采用的是渐进增强方法，所以这里没有提到任何 Flash 标记！

#last-fm {
    display:block;
    overflow:hidden;
    height:200px;
    width:184px;
    background:url(http://cdn.last.fm/widgets/images/en/header/
                   chart/recenttracks_regular_black.png) no-repeat 0 -20px;
    text-decoration:none;
}
<div id="last-fm">
<p>Last.fm is a social media web site that analyzes ('scrobbles') the music 
      you play on your computer and suggests similar artists, 
      music styles and friends to you.<p>

<p>Install the Flash Player to view my recent tracks, or visit my Last.fm page below<p>

<a href="http://last.fm" title="Visit Last.fm" rel="Bookmark">Visit Last.fm</a>
</div>

接下来，我们需要创建尝试将 Flash 对象添加到页面的脚本，这需要将几个设置传递给 Flash 影片。

我们传递给 Flash 影片的设置特定于您自己的 Last.fm 帐户，因此在 Last.fm 上创建您的小部件后，您需要相应地更改 flashvars 变量。

<script type="text/javascript">
    $(document).ready(function() {
        // Flash variables
        var flashvars = {};
        flashvars.siteroot = "";
        flashvars.type = "recenttracks";
        flashvars.user = "USERNAME";
        flashvars.theme = "black";
        flashvars.lang = "en";
        flashvars.widget_id = "WIDGETID";

        // Flash parameters
        var params = {};
        params.allowfullscreen = "true";
        params.allowScriptAccess = "always";
        params.allowNetworking = "all";
        params.quality = "high";
        params.bgcolor = "000000";
        params.wmode = "transparent";
        params.menu = "true";

        // Attributes
        var attributes = {};

        // Call SWFobject
        swfobject.embedSWF("http://cdn.last.fm/widgets/chart/friends_6.swf", 
          "last-fm", "184", "199", "7.0.0", 
          false, flashvars, params, attributes);
    });
</script>

请注意，我已将脚本包装在 jQuery document 函数中，该函数检测 JavaScript 的可用性。如果您使用此脚本，请不要忘记包含 jQuery 重新分配脚本！

最重要的部分是我们调用 swfobject.embedSWF 的地方。我们将 Last.fm SWF 文件的路径和我们要将 Flash 影片加载到的元素的 ID 传递给它。由于我们已经创建了一个 ID 为 last-fm 的 DIV，因此我们将“last-fm”作为元素名称传递。

其余参数处理宽度、高度、SWF Flash 版本以及我们在 flashvars 和 parameters 数组中设置的参数。

就是我们需要做的全部，保存您的文件，然后启动它。关闭您的 JavaScript 并刷新页面以检查您的脚本是否正常工作！

历史

此时没有更改。

© . All rights reserved.