flash嵌入html 在html网页代码中嵌入Flash文件的解决方案(上)

所属分类: 网页制作 / HTML/Xhtml 阅读数: 999
收藏 0 赞 0 分享

中国人的习俗,没过完正月十五就还是在过年,在这里给园子你的朋友们拜个晚年了。
这几天恰逢公司网站首页需要改版,去年底公司“人员精简”后,一个人得做多个人的活,忽然之间发觉担子重了。这不, 本不是我工作范围内的事情,不幸也让我参与其中了,不幸中的幸事是这次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请点击该链接即可)中改编而来的使用示例:

复制代码
代码如下:

<html>
<title>DEMO</title>
<head>
<script type="text/javascript" src="swfobject_source.js"></script>
<script type="text/javascript">
var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");
so.write("flashcontent");
</script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
</body>
</html>

如果您想简要了解一下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文件有问题,如果有问题,那问题究竟出在哪里了?当时,我是这样寻求解决错误的方法,我将上述代码修改为以下示例:

复制代码
代码如下:

<html>
<title>DEMO</title>
<head>
<script type="text/javascript">
// 执行一个匿名函数,和执行一个普通的函数没有差别
(function() {
var flash = document.getElementById("flashcontent");
var msg = null;
window.onload = function() {
if ( flash ) {
msg = 'The element does exist.';
flash.innerHTML = msg;
} else {
msg = 'The element does not exist';
window.alert( msg );
}
};
})();
</script>
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" _fcksavedurl=""http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
</body>
</html>

如果您执行了上述代码就会发现,依旧发现显示在页面上的还是这张图 ,并且弹出一个含有“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的加载”的问题,到底是哪种方法呢,我想大家或许应该猜想到了,对,正是如下这种方式:

复制代码
代码如下:

<html>
<title>DEMO</title>
<head>
<script type="text/javascript" src="swfobject_source.js"></script> _fcksavedurl=""swfobject_source.js"></script>"
</head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" border="0" />
</a>
</div>
</form>
<script type="text/javascript">
var so = new SWFObject("http://www.pec365.com/Flash/20071113.swf", "mymovie", "304", "367", "7", "#FFFFFF");
so.write("flashcontent");
</script>
</body>
</html>

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

更多精彩内容其他人还在看

网页注释在IE中产生文字溢出

实验代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transiti
收藏 0 赞 0 分享

HTML教程:定义列表

原文:http://andymao.com/andy/post/104.html 上一节:有序列表 写完“无序列表”和“有序列表”之后已经有人和我说这两篇看得没什么意思。这两篇文章如果只以单向读取的形式阅读那么的确是没什
收藏 0 赞 0 分享

HTML教程:有序列表

原文:http://andymao.com/andy/post/103.html 上一节:无序列表 信息有时候是无序归纳的,有的却有着明确的顺序,在上一篇也提到了。那么简单的来想一下身边有哪些事物是有先后顺序的:操作步骤、排行榜、书目录……
收藏 0 赞 0 分享

HTML教程:无序列表

原文:http://andymao.com/andy/post/102.html 段落已经讲完了,那么一些基本的应用方式也讲了一些,那么是否已经应用了呢?当然应用可以更为丰富,那么这些就需要自己在实际工作中不断的摸索与思考,然后创新并总结得出新的应用形式。当然了段落不能当作
收藏 0 赞 0 分享

HTML网页制作的强大8条技巧

  虽然现在有许多网页制作工具能让您轻松地完成工作,但如果使用HTML则可以得到更大控制权,下面介绍几个小技巧。   1。使用<tt>,<i>,<br>语句来控制文字排版比用<pre>好得多。 如: <tt>实用
收藏 0 赞 0 分享

网页表格分割线去除方法

网页表格分割线去除方法。 其实上面的三个表格都有三行三列,隐藏分隔线的诀窍在于rules,察看这三个表格的源代码,我们可以看到<TABLE>标签中都有rules。它有三个参数(cols,rows,none),当rules=cols时,表格会隐藏纵向的分隔线,这
收藏 0 赞 0 分享

blockquote标记应用注意

关于语义化,不是一句两句就能说明白的,而且现在也没有一个官方的很严格的定义。关于<blockquote>没有争议的是: 1.引用一段较长的文字 2.可以使用cite标签或者属性 问题是<blockquote>引用的文字必须使用块级元素将他
收藏 0 赞 0 分享

网页表格表框制作技巧

网页表格表框制作技巧。 -------------------------------------------------------------------------------- 表格边框的显示与隐藏,是可以用frame参数来控制的。请注意它只控制表格的边框图,而不
收藏 0 赞 0 分享

HTML其实就是学习几个重要标记的应用

《这将是一场革命》一文出来以后。得到业界大伙的认同,当然与此同时也得到部分来自内部与外部的挑衅,不过的更加多的是更多人来寻问每一个点的细节。今晚回家很早就睡了,半夜在一个梦中醒来,梦里正在和小学的同学玩一个游戏——“The Next&rdquo
收藏 0 赞 0 分享

移动端专用的meta标签设置大全

不知道有没有人觉得,html的meta标签描述的头部信息特别多,下面这篇文章主要给大家分享介绍了关于移动端专用的meta设置的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面随着小编来一起学习学习吧
收藏 0 赞 0 分享
查看更多