JavaScript RIA开发入门：Flash和HTML及JavaScript交互

JavaScript是众所皆知的前端脚本语言,以其跨平台,开放性广受欢迎.JavaScript为RIA开发插上翅膀,让RIA技术更好地融入前端开发.本系列将介绍JavaScript RIA开发中的要点,以及各类框架和思路.本文介绍了Flash和HTML以及JavaScript交互的相关技术,涉及JavaScript调用Flash和Flash调用JavaScript,并介绍了一些简化开发的框架.

通过和标签嵌入Flash文件

假设有一个SWF文件,文件名为file.swf,那么可以通过以下方法嵌入到HTML

请将代码中的swfwidth和swfheight替换为你希望嵌入的SWF文件的宽度和长度.你还可以指定quality,也就是SWF文件的质量,align是对齐方式,可以选择居中对齐.param的name要指定为movie,embed指向的路径要和param的value值一致.

参考资料:https://perishablepress.com/embed-flash-and-video-via-the-object-tag/

通过Objecty快速插入SWF文件

使用Objecty这个JavaScript库可以极大简化Flash嵌入HTML的过程.首先你必须引用objecty.js这个库,代码如下:

假设你有一个file.swf文件,那么通过如下方式嵌入到HTML:

长度和宽度可以自定义,完整代码如下:

参考资料:http://wiltgen.net/objecty/

第一种方法的替代版本

第一种方法有一种替代方法,分IE版本和非IE版本,非IE版本代码如下:

IE版本代码如下:

参考资料:https://perishablepress.com/embed-flash-and-video-via-the-object-tag/

当然把Flash嵌入HTML的方法有很多,感兴趣的朋友可以看看StackOverflow上面的问答,讲得很详细,https://stackoverflow.com/questions/137326/how-to-embed-a-swf-file-in-an-html-page.

通过JavaScript将Flash嵌入到HTML中

要通过JavaScript将Flash嵌入到HTML中,需要了解这些库:

SWFObject(http://blog.deconcept.com/swfobject/) - 知名的SWF操作库.

SWFAddress(http://blog.deconcept.com/2006/10/25/swfaddress/) - 构建于SWFObject之上,提供深链接(Deep Linking)和返回按钮,让你很方便地构建Flash网站.

EasySWF(https://www.gieson.com/Library/projects/utilities/easyswf/) - SWFObject的一个封装,让你更方便地实现嵌入Flash.

jQuery的SWFObject封装(http://jquery.thewikies.com/swfobject/) - 使用jQuery操作SWFObject.

SWF-jQuery(http://webcaetano.github.io/swf-jquery/) - jQuery SWF操作库.

jQuery Flash Plugin(http://jquery.lukelutman.com/plugins/flash/) - jQuery Flash插件.

Dojo Toolkit嵌入Flash(https://dojotoolkit.org/reference-guide/1.10/dojox/embed/Flash.html) - 通过Dojo操作SWF.

在ExtJS中插入SWF(https://loiane.com/2012/07/tutorial-adding-a-flash-file-inside-an-extjs-4-component/)

YUI SWF工具(https://yuilibrary.com/yui/docs/swf/) - 通过YUI嵌入Flash.

Mootools Swiff(https://mootools.net/blog/2008/02/12/whats-new-in-12-swiff) - 通过Mootools嵌入SWF文件.

React-SWF(https://github.com/syranide/react-swf) - 通过ReactJS嵌入Flash.

学习SWFObject的教程

现在学习SWFObject的教程也不少了,搜索一下都可以找到,这里推荐一个:

Learn SWFObject(http://learnswfobject.com/index.html)

怎样用Flash操作JavaScript?

Flash可以通过ExternalInterface调用JavaScript,也可以通过第三方库调用jQuery.

ExternalInterface教程(https://sourcey.com/javascript-object-to-flash-swf-externalinterface-bridge/)

AS3通过jotAQuery调用jQuery(https://code.tutsplus.com/tutorials/quick-tip-call-jquery-inside-as3-using-jotaquery--active-7769)

AS3通过ExternalInterface调用Mootools插件Slimbox(http://malebolgia.shadowsonawall.net/code-programming/flash-as3-and-mootools-slimbox.html)

总结

本文介绍了Flash和HTML以及JavaScript交互的几个知识点,Flash和JavaScript交互是非常重要的技能,需要多学多练来熟悉巩固.