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 相关文章推荐
JS类中定义原型方法的两种实现的区别
Mar 08 Javascript
javascript 写类方式之四
Jul 05 Javascript
用Javascript数组处理多个字符串的连接问题
Aug 20 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
Feb 12 Javascript
5个最佳的Javascript日期处理类库分享
Apr 15 Javascript
jquery实现的树形目录实例
Jun 26 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
关于iframe跨域POST提交的方法示例
Jan 15 Javascript
JavaScript实现的原生态兼容IE6可调可控滚动文字功能详解
Sep 19 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
vue组件传值的实现方式小结【三种方式】
Feb 05 Javascript
用webAPI实现图片放大镜效果
Nov 23 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
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
js代码实现微博导航栏
2015/07/30 PHP
PHP时间戳格式全部汇总 (获取时间、时间戳)
2016/06/13 PHP
详解Yii2高级版引入bootstrap.js的一个办法
2017/03/21 PHP
PHP getNamespaces()函数讲解
2019/02/03 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
javascript 弹出层组件(升级版)
2011/05/12 Javascript
使用Json比用string返回数据更友好,也更面向对象一些
2011/09/13 Javascript
javaScript 利用闭包模拟对象的私有属性
2011/12/29 Javascript
JQuery为页面Dom元素绑定事件及解除绑定方法
2014/04/23 Javascript
浅析JS异步加载进度条
2016/05/05 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
2017/08/25 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
python连接字符串的方法小结
2015/07/13 Python
详解Python中的四种队列
2018/05/21 Python
python实现最长公共子序列
2018/05/22 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
在django模板中实现超链接配置
2019/08/21 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
python cv2截取不规则区域图片实例
2019/12/21 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
Python调用shell命令常用方法(4种)
2020/05/11 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
HTML5中外部浏览器唤起微信分享功能的代码
2020/09/15 HTML / CSS
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
大学社团活动策划书
2014/01/26 职场文书
研究生求职自荐书
2014/06/23 职场文书
道德与公民自我评价
2015/03/09 职场文书
会议主持词结束语
2015/07/03 职场文书
解决numpy数组互换两行及赋值的问题
2021/04/17 Python
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers