伏龙阁资源网

flash嵌入html 在html网页代码中嵌入Flash文件的解决方案(上)
站长资源 2024/11/22 佚名
2 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="/UploadFiles/2021-03-30/swfobject_source.js"><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="/UploadFiles/2021-03-30/get_flash_player.gif"></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嵌入html 在html网页代码中嵌入Flash文件的解决方案(上) ，而非一个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="/UploadFiles/2021-03-30/get_flash_player.gif"></a>
</div>
</form>
</body>
</html>
如果您执行了上述代码就会发现，依旧发现显示在页面上的还是这张图flash嵌入html 在html网页代码中嵌入Flash文件的解决方案(上) ，并且弹出一个含有“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="/UploadFiles/2021-03-30/swfobject_source.js"></head>
<body>
<form id="Form1">
<div id="flashcontent">
<a href="http://www.adobe.com/go/getflashplayer">
<img src="/UploadFiles/2021-03-30/get_flash_player.gif"></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>

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

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
www.wwsws.com 伏龙阁资源网
39,976影音资源
44,792技术资源
21,817软件资源
651,128站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接