javascript向flash swf文件传递参数值注意细节


Posted in Javascript onDecember 11, 2012

问题:如何使用javascript向SWF文件传递参数?
在网上找了一个完整的教程,很有启发性和实用性,如下是完整实现的步骤:
配置SwfObject
Swfobject2是目前检测用户是否安装Flash的最佳方法。它被认为是‘行业标准',并且Adobe所有产品的新版本(Flex4,Flash CS5)都会使用SwfObject来检测Flash Player。
先要下载,解压ZIP文件,复制swfobject.js文件到你的web服务器上,根目录下创建名为'js'根文件夹是个不错的想法。(因此文件位置应该是http://myserver.com/js/swfobject.js)。我们会在以后创建的HTML文件中参考这个文件的。如果你想使用ExpressInstall功能(为用户提供简单的升级方法),你必须将expressInstall.swf复制到相同的文件夹下。
配置HTML文件
HTML文件包括两个Javascript。一个用来抓取来自网址的参数。这是由Matt White创建的,它虽然简单但十分有效。代码如下:

<script type="text/javascript"> 
/* Get URL Parameter in Javascript. Code from: http://mattwhite.me/11tmr.nsf/D6Plinks/MWHE-695L9Z */ 
function getURLParam(strParamName){ 
var strReturn = ""; 
var strHref = window.location.href; 
if ( strHref.indexOf("?") > -1 ){ 
var strQueryString = strHref.substr(strHref.indexOf("?")); 
var aQueryString = strQueryString.split("&"); 
for ( var iParam = 0; iParam < aQueryString.length; iParam++ ){ 
if ( aQueryString[iParam].indexOf(strParamName.toLowerCase() + "=") > -1 ){ 
var aParam = aQueryString[iParam].split("="); 
strReturn = aParam[1]; 
break; 
} 
} 
} 
return unescape(strReturn); 
} 
</script>

将如上代码放置到你的HTML文件的HEAD标签中。你同样需要将导入SWFObject脚本导入进来,代码如下:
<script type="text/javascript" src="/js/swfobject.js"></script>另一个Javascript是使用SwfObject插入SWF文件。你可以将其放置在HTML文件的任何地方。首先我们要做的是创建一个DIV标签,在没有安装合适的Flash Player时提示用户。
<div id="flashcontent"> 
<strong>This content requires Flash Player 9 (or a more recent version). 
<noscript>Make sure JavaScript is turned on. </noscript> 
You need to <a href="http://www.adobe.com/shockwave/download/index.cgi?p1_prod_version=shockwaveflash" target="_blank"> 
<span style="text-decoration: underline;">upgrade your Flash Player</span></a></strong> 
</div>

在DIV标签内你可以输入任何想输入的内容。添加图片或者反馈信息随你喜欢,因为这些内容都会被SWF文件所替换。
接下来是实现替换功能的Javascript:
<script type="text/javascript"> 
var flashvars = { test:getURLParam("test") }; 
var params = {}; 
var attributes = {}; 
swfobject.embedSWF("/articlefiles/jsvars/jsvars.swf", "flashcontent", "550", "400", "9.0.0","", flashvars, params, attributes); 
</script>

注意第二行,我们调用了Javascript函数'getURLParam',这个函数已经被插入到HTML文件中。我们所传递的名字正是希望从网址中捕获的参数名。
创建Flash文件
接下来该创建Flash文件了。将一个文本框添加到舞台上。在属性面板中设置为'动态文本',实例名为'mytextField'。通过点击'显示文本周围边框'实现在选中文本框时显示边框。
捕获传递进来的参数需要使用如下的try/catch语句:
try { 
var key:String; // This will contain the name of the parameter 
var val:String; // This will contain the value of the parameter 
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters; 
for (key in flashvars) { 
val = String(flashvars[key]); 
mytextField.text = key+": "+val; 
} 
} catch (error:Error) { 
// what to do if an error occurs 
}

文件:jsvars_test.fla
将文件和HTML文件一并上传到服务器上。当运行文件时,你会看到文本框中的'test:'字样。
注意:如果SWF无法显示,你只看到了'升级Flash Player'字样,说明服务器上缺少某些东西。确保你已经将SwfObject文件(swfobject.js)上传到了http://myserver.com/js/swfobject.js。同时确保HTML文件中的SwfObject文件和SWF文件路径正确。如果仍然有问题,查看一下例子的源文件及路径。
接下来,试着像这样添加test参数http://www.flashmagazine.com/articlefiles/jsvars/jsvars_test.html?test=something.如果一切正常,你将会看到'test:something',表明你已经成功的将参数传递到Flash文件中。
更进一步
你同样可以设置来自SWF文件的参数。在这个例子中http://www.flashmagazine.com/articlefiles/jsvars/jsvars.html?test=something&id=someID我们同样实现了发送参数。
FLA文件包含两个分别命名为'variablesReceived'和'variablesToSend'的文本框,以及一个用来发送新参数的按钮。这个例子的HTMl文件被设置接收'test'和'id'两个参数。首先我们为第一个文本框添加一些说明性文字:
variablesReceived.text ="Variables passed in:" + " ";接下来该接收变量了:
try { 
var key:String; 
var val:String; 
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters; 
for (key in flashvars) { 
val = String(flashvars[key]); 
variablesReceived.appendText("\t" + key + ": " + val + " "); 
} 
} catch (error:Error) { 
variablesReceived.appendText(error.toString()); 
}

这将会在第一个文本框中列举出所有的flashvars。我们在这个文件中使用到的另一个主要函数就是发送变量函数:
// Sending parameters 
function sendVariables(e:MouseEvent):void { 
// First we grab the URL of the HTML document and split it into an array 
var htmlUrl:String = ExternalInterface.call("window.location.href.toString"); 
// split the string at the questionmark 
var splitUrl:Array = htmlUrl.split("?"); 
// use only the first part (ditch existing parameters) 
var trimmedUrl:String = splitUrl[0]; 
// get the parameters we want to append to the URL 
var parameters:String = variablesToSend.text; 
// combine url and parameters with a new questionmark 
var requester:URLRequest = new URLRequest(trimmedUrl+"?"+parameters); 
// reload the page 
navigateToURL(requester, '_self'); 
}

这里我们使用了一个小小技巧,通过使用'ExternalInterface.call'捕获SWF文件插入的HTML文本的网址。Flash文件只知道指向自身的网址,这个技巧突破了这个限制。ExternalInterface在SwfObject默认情况下是被打开的,但你可以手动关闭它。

我们不需要当前网址中的参数(也就是'…?test=something&id=5′)。因此我们只保留了问号之前的部分并将其存储在'trimmedUrl'变量中以备将来之用。我们捕获'variablesToSend'文本框中的参数,并将其传递到URLRequest中。通过将request传递给'navigateToURL',浏览器会重新加载HTML页面并在'variablesReceived'文本框中显示最近提交的值对。

注意:你不能在Flash中测试它。需要将文件上传到服务器上,因为FlashVars和ExternalInterface都需要SWF被插入到浏览器中。

最后我们必须使用addEventListener为发送按钮设置调用'sendVariables'方法。
sendButton.addEventListener(MouseEvent.CLICK,sendVariables);现在你已经知道如何使用Javascript相互传递参数了。让我们用我们的所学做一些有用的事情。

创建记录状态的导航
结束之前,让我们构建一个小型菜单系统,这个系统可以高亮显示当前的点击按钮,你可以下载已完成文件或者运行案例,让我们看一下代码:
首先停止SWF的时间轴播放,为鼠标点击设置事件监听器。
stop();
// setup our 5 buttons
item1.addEventListener(MouseEvent.CLICK, gotoURL);
item2.addEventListener(MouseEvent.CLICK, gotoURL);
item3.addEventListener(MouseEvent.CLICK, gotoURL);
item4.addEventListener(MouseEvent.CLICK, gotoURL);
item5.addEventListener(MouseEvent.CLICK, gotoURL);当仍然一个按钮被点击,他们都会执行'gotoURL'函数。接下来,我们捕获来自网址的参数:

// grab variables 
try { 
var key:String; 
var val:String; 
var flashvars:Object = LoaderInfo(this.root.loaderInfo).parameters; 
for (key in flashvars) { 
val = String(flashvars[key]); 
if(key == "item"){ // If the parameter is called 'item'... 
if(val.substr(0,4) == "item"){ // ... and the name of the button starts with the characters 'item'... 
// ... we can extract the number-part of the item-name and go to the correct frame 
var frameToGoTo:Number = Number( val.substr(4,1) ); 
gotoAndStop( frameToGoTo+1 ); 
} 
} 
} 
} catch (error:Error) { 
// what to do if an error occurs 
}

正如你所看到的,这和之前的做法十分相似。但这次我们传递的参数名字为'item'。这个参数是我们点击的按钮的名字。
接下来是gotoURL函数。
// Get the new page 
function gotoURL(e:MouseEvent):void { 
// First we grab the URL of the HTML document and split it into an array 
var htmlUrl:String = ExternalInterface.call("window.location.href.toString"); 
// split the string at the questionmark 
var splitUrl:Array = htmlUrl.split("?"); 
// use only the first part (ditch existing parameters) 
var trimmedUrl:String = splitUrl[0]; 
// get the name of the button clicked and set it as a parameter 
var parameters:String = "item="+e.currentTarget.name; 
// combine url and parameters with a new questionmark 
var requester:URLRequest = new URLRequest(trimmedUrl+"?"+parameters); 
// reload the page 
navigateToURL(requester, '_self'); 
}

我们通过联合'item='字符以及点击的按钮名字创建自己的参数。然后将网址以及参数传递到navigateToURL方法中重新加载带有新参数的HTML页面。

事件是如何工作的:当一些东西被点击时我们使用addEventListener()方法监听点击事件,事件包含被点击的对象的引用。'currentTarget'属性会引用被点击的对象(e.currentTarget),这样一来我们就可以使用e.currentTarget.name获得其名字。

要成为一个完整的菜单系统,你还需要使加载新的网址,而不是像例子中使用相同的网址。你现在应该知道最基本的知识。它同时可以以多种方式运行。可以将网址当做变量存储在SWF中,从一个XML文件加载,或者更多其它的方式。因此我把这些交给你。如果你使用本教程创建了解决方案,请在评论中张贴网址,以便其他学习者可以看到它.

Javascript 相关文章推荐
jquery键盘事件使用介绍
Nov 01 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
Feb 21 Javascript
Bootstrap Modal遮罩弹出层(完整版)
Nov 21 Javascript
JS中BOM相关知识点总结(必看篇)
Nov 22 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
javascript简单写的判断电话号码实例
May 24 Javascript
React-intl 实现多语言的示例代码
Nov 03 Javascript
vue进入页面时滚动条始终在底部代码实例
Mar 26 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
VUE : vue-cli中去掉路由中的井号#操作
Sep 04 Javascript
ajax的hide隐藏问题解决方法
Dec 11 #Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 #Javascript
jQuery(非HTML5)可编辑表格实现代码
Dec 11 #Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 #Javascript
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 #Javascript
ajax不执行success回调而是执行了error回调
Dec 10 #Javascript
解决js正则匹配换行问题实现代码
Dec 10 #Javascript
You might like
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
使用JQuery进行跨域请求
2010/01/25 Javascript
jQuery选择头像并实时显示的代码
2010/06/27 Javascript
javascript中关于执行环境的杂谈
2011/08/14 Javascript
Jquery图片滚动与幻灯片的实例代码
2013/04/08 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
2013/10/22 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
Bootstrap源码学习笔记之bootstrap进度条
2016/12/24 Javascript
Node.js Express 框架 POST方法详解
2017/01/23 Javascript
微信小程序左右滑动切换页面详解及实例代码
2017/02/28 Javascript
原生js获取left值和top值的三种方法
2017/08/02 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
Python读写配置文件的方法
2015/06/03 Python
Python实现复杂对象转JSON的方法示例
2017/06/22 Python
python+openCV调用摄像头拍摄和处理图片的实现
2019/08/06 Python
python3调用windows dos命令的例子
2019/08/14 Python
python-序列解包(对可迭代元素的快速取值方法)
2019/08/24 Python
浅析Python3 pip换源问题
2020/01/06 Python
Python class的继承方法代码实例
2020/02/14 Python
Python 中如何写注释
2020/08/28 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
Java语言程序设计测试题判断题部分
2013/01/06 面试题
毕业设计说明书
2014/05/07 职场文书
励志演讲稿3分钟
2014/08/21 职场文书
财务负责人岗位职责
2015/02/03 职场文书