在HTML代码中嵌入Flash文件的解决方案！(上)

中国人的习俗，没过完正月十五就还是在过年，在这里给园子你的朋友们拜个晚年了。

这几天恰逢公司网站首页需要改版，去年底公司“人员精简”后，一个人得做多个人的活，忽然之间发觉担子重了。这不，
本不是我工作范围内的事情，不幸也让我参与其中了，不幸中的幸事是这次BOSS交给我的任务，恰是我一直热衷的前端开发
任务。之前一直从事公司网站的后台管理程序开发，更多是在服务器端处理业务逻辑，一直没有机会在我热衷的前端开发上施
展拳脚。实践是检验真知的最好途径，通过解决分派给我的实际任务正是一次难得的大检验，通过书本和各种资料学习许多零
散的知识，却未得机会将他们揉合在一起来次“综合测验”，呵呵。

前面墨迹那么多，都是压抑久了惹得祸，呵呵。

我先来描述一下任务要求吧：公司网站首页上有一张由五个球组成的JPG图片，其作用是用来导航，点击每个球上的文字后
会打开相应信息的二级页面，与该图片相应的有一个几乎一模一样的Flash版本。而上司布置给我的任务之一就是：当客户端浏
览器安装了Flash文件播放器时，显示Flash版导航，反之显示JPG图片导航。拿到任务后，考虑片刻，既是前端开发，当然要考
虑浏览器兼容问题，跨越浏览器之间的鸿沟最好的办法就是使用一种或多种成熟的JavaScript框架，很幸运的是恰好有一个非常
成熟精巧的JS框架存在，名曰：SWFObject.js。

第一次接触SWFObject.js是其V1.5，而这次我解决问题使用的是V2.1，两者之间的使用上还是有些差别的。整体上给我的
感觉是V2.1较之V1.5来说，是一次大跃进，V2.1无论从框架的源码还是使用过程来说，都更加符合面向对象的JavaScript编程
风格。

我将以一个探索JavaScript不久的研习者的视角，带着您一起来体验这趟“折腾”之旅，无论您是和我一样的新手，还是已
经能够熟练编写各种JS代码的老手，望请手下留情，希望大家以文明的心态指出我思考中的短视和文字中的错误。
下面的代码是我从SWFObject V1.5的一篇说明文档（如想进一步了解V1.5请点击该链接即可）中改编而来的使用示例：

V1.5使用示例

如果您想简要了解一下SWFObject()中的各个参数的含义，请参考说明文档，再此不在复述。

我强烈建议您，把“V1.5使用示例”中的代码拷贝到记事本中，并点击SWFObject V1.5下载所需的V1.5框架的源文件，
解压缩后找到swfobject_source.js（未压缩版，压缩版文件名是swfobject.js）文件，将记事本文件更名为demo.html后与
swfobject_source.js文件放置于相同文件夹下即可，然后请您分别在IE6/IE7、fox、opera、safari、 navigator、chrome
等任意一款浏览器下运行看看结果如何。

如果您按照我的建议操作了，应当发现显示在页面上的是这张图，而非一个Flash文件，这是为什么呢？如果
您的PC上恰好安装了IE系列的话，请按照以下步骤操作：点击IE浏览器图标，找到工具栏上的“工具”菜单，选中的“Internet选项”，
在打开的窗口中点击“高级”，找到“禁用脚本调试（Internet Explorer）”选项，将其前面方框中的勾选去掉，点击“确定”。请
在完成上述操作之后，再次浏览demo.html页面，是否会发现弹出一个错误提示框，其提示错误信息如下：“出现了运行时错误，是
否需要进行调试。行：117 错误：'null'为空或不是对象。”

如果您恰好正在使用VS 2003/2005/2008系列的IDE做开发，那么我想无需教您如何调试JavaScript代码了，您可以var so =
……的上方打一个debugger，然后调试跟踪进去，不停按F11后直到通过so.write()方法追踪到swfobject_source.js文件的内部，
您会发现传递给so.write(elementId)的实参"flashcontent"在document.getElementById("flashcontent")时值一直为null，这又
是为什么？发现问题所在了吗？

呵呵，如果您还是一名对JavaScript了解不多的新手，那么会和当时的我一样顿时陷入迷惘之中，在经过多次的调试和修改代码后，
我坚信自己编写的JS代码本身是不存在错误的，难道是外部加载的swfobject_source.js文件有问题，如果有问题，那问题究竟出在哪
里了？当时，我是这样寻求解决错误的方法，我将上述代码修改为以下示例：

示例1.1

     如果您执行了上述代码就会发现，依旧发现显示在页面上的还是这张图，并且弹出一个含有“The element
does not exist"的警告框，看来问题并非出自外部加载的swfobject_source.js文件上。
     如果您看到这里，定会体验我当时的懊恼，在稍微休息后，清醒下脑子回头再看，才发现问题的本质出在“HTML DOM的加载”
上。在一个页面中，处于页面头部(即<head></head>之间)中的JS脚本以及从外部文件加载的JS文件会在HTML DOM
真正构造之前就执行了。因此这两个地方执行的脚本并不能访问还不存在的DOM。您应该知道真正的原因了，那就是示例1.1
中的JS代码执行过程中，访问了还未来得及构造的<div id="flashcontent">……</div>。
     好了，看到这里，还有最后一个步骤需要您亲自动手操作一下，就是将上述代码简单的修改一下，采取一种并不优雅的方法解决
关于“HTML DOM的加载”的问题，到底是哪种方法呢，我想大家或许应该猜想到了，对，正是如下这种方式：

示例1.2

前面洋洋洒洒上千字，只是在描述我走了多少弯路，在解决问题的过程中遇见那些麻烦，从麻烦中解脱出来运用了那些学习的
知识，又从中学习了那些知识，虽然有点累赘之嫌，但是您是否如我一样也有不一样的收获呢？

posted on 2009-02-05 20:42 rainnoless 阅读(4167) 评论(2) 编辑收藏举报