热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

flash嵌入html在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请点击该链接即可)中改编而来的使用示例:

代码如下:














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

代码如下:












如果您执行了上述代码就会发现,依旧发现显示在页面上的还是这张图flash嵌入html在html网页代码中嵌入Flash文件的解决方案(上) - 文章图片 ,并且弹出一个含有“The element does not exist"的警告框,看来问题并非出自外部加载的swfobject_source.js文件上。

如果您看到这里,定会体验我当时的懊恼,在稍微休息后,清醒下脑子回头再看,才发现问题的本质出在“HTML DOM的加载”上。在一个页面中,处于页面头部(即之间)中的JS脚本以及从外部文件加载的JS文件会在HTML DOM 真正构造之前就执行了。因此这两个地方执行的脚本并不能访问还不存在的DOM。您应该知道真正的原因了,那就是示例1.1 中的JS代码执行过程中,访问了还未来得及构造的
……


好了,看到这里,还有最后一个步骤需要您亲自动手操作一下,就是将上述代码简单的修改一下,采取一种并不优雅的方法解决
关于“HTML DOM的加载”的问题,到底是哪种方法呢,我想大家或许应该猜想到了,对,正是如下这种方式:

代码如下:




_fcksavedurl=""swfobject_source.js">"









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

推荐阅读
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • 深入理解CSS中的margin属性及其应用场景
    本文主要介绍了CSS中的margin属性及其应用场景,包括垂直外边距合并、padding的使用时机、行内替换元素与费替换元素的区别、margin的基线、盒子的物理大小、显示大小、逻辑大小等知识点。通过深入理解这些概念,读者可以更好地掌握margin的用法和原理。同时,文中提供了一些相关的文档和规范供读者参考。 ... [详细]
  • 本文讨论了在手机移动端如何使用HTML5和JavaScript实现视频上传并压缩视频质量,或者降低手机摄像头拍摄质量的问题。作者指出HTML5和JavaScript无法直接压缩视频,只能通过将视频传送到服务器端由后端进行压缩。对于控制相机拍摄质量,只有使用JAVA编写Android客户端才能实现压缩。此外,作者还解释了在交作业时使用zip格式压缩包导致CSS文件和图片音乐丢失的原因,并提供了解决方法。最后,作者还介绍了一个用于处理图片的类,可以实现图片剪裁处理和生成缩略图的功能。 ... [详细]
  • macOS Big Sur全新设计大版本更新,10+个值得关注的新功能
    本文介绍了Apple发布的新一代操作系统macOS Big Sur,该系统采用全新的界面设计,包括图标、应用界面、程序坞和菜单栏等方面的变化。新系统还增加了通知中心、桌面小组件、强化的Safari浏览器以及隐私保护等多项功能。文章指出,macOS Big Sur的设计与iPadOS越来越接近,结合了去年iPadOS对鼠标的完善等功能。 ... [详细]
  • ECMA262规定typeof操作符的返回值和instanceof的使用方法
    本文介绍了ECMA262规定的typeof操作符对不同类型的变量的返回值,以及instanceof操作符的使用方法。同时还提到了在不同浏览器中对正则表达式应用typeof操作符的返回值的差异。 ... [详细]
  • 本文介绍了H5游戏性能优化和调试技巧,包括从问题表象出发进行优化、排除外部问题导致的卡顿、帧率设定、减少drawcall的方法、UI优化和图集渲染等八个理念。对于游戏程序员来说,解决游戏性能问题是一个关键的任务,本文提供了一些有用的参考价值。摘要长度为183字。 ... [详细]
  • vue使用
    关键词: ... [详细]
  • 如何使用Java获取服务器硬件信息和磁盘负载率
    本文介绍了使用Java编程语言获取服务器硬件信息和磁盘负载率的方法。首先在远程服务器上搭建一个支持服务端语言的HTTP服务,并获取服务器的磁盘信息,并将结果输出。然后在本地使用JS编写一个AJAX脚本,远程请求服务端的程序,得到结果并展示给用户。其中还介绍了如何提取硬盘序列号的方法。 ... [详细]
  • 展开全部下面的代码是创建一个立方体Thisexamplescreatesanddisplaysasimplebox.#Thefirstlineloadstheinit_disp ... [详细]
  • FeatureRequestIsyourfeaturerequestrelatedtoaproblem?Please ... [详细]
  • HTML学习02 图像标签的使用和属性
    本文介绍了HTML中图像标签的使用和属性,包括定义图像、定义图像地图、使用源属性和替换文本属性。同时提供了相关实例和注意事项,帮助读者更好地理解和应用图像标签。 ... [详细]
  • 本文总结了在开发中使用gulp时的一些技巧,包括如何使用gulp.dest自动创建目录、如何使用gulp.src复制具名路径的文件以及保留文件夹路径的方法等。同时介绍了使用base选项和通配符来保留文件夹路径的技巧,并提到了解决带文件夹的复制问题的方法,即使用gulp-flatten插件。 ... [详细]
  • jQuery实现简单的动画效果及用法详解
    本文详细介绍了使用jQuery实现简单动画效果的方法,包括显示/隐藏、向上收缩/向下展开、淡入/淡出、自定义动画等。同时提供了具体的用法示例,并解释了参数的含义和使用技巧。通过本文的学习,读者可以掌握如何使用jQuery实现各种动画效果,为网页增添生动和互动性。 ... [详细]
  • 如何压缩网站页面以减少页面加载时间
    本文介绍了影响网站打开时间的两个因素,即网页加载速度和网站页面大小。重点讲解了如何通过压缩网站页面来减少页面加载时间。具体包括图片压缩、Javascript压缩、CSS压缩和HTML压缩等方法,并推荐了相应的压缩工具。此外,还提到了一款Google Chrome插件——网页加载速度分析工具Speed Tracer。 ... [详细]
  • 这个问题发生在重新安装系统后,丢失了之前的privatekey等。所以解决方法就是提示的revokeandrequest。到developercenter中找到certificat ... [详细]
author-avatar
Lala88童鞋_619
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有