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 相关文章推荐
sina的lightbox效果。
Jan 09 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
利用Keydown事件阻止用户输入实现代码
Mar 11 Javascript
jQuery基于图层模仿五星星评价功能的方法
May 07 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
JS非空验证及邮箱验证的实例
Aug 11 Javascript
JS中Map和ForEach的区别
Feb 05 Javascript
Vue路由history模式解决404问题的几种方法
Sep 29 Javascript
ES6知识点整理之对象解构赋值应用示例
Apr 17 Javascript
在Vue项目中用fullcalendar制作日程表的示例代码
Aug 04 Javascript
js+audio实现音乐播放器
Sep 13 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 采集程序原理分析篇
2010/03/05 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php封装的单文件(图片)上传类完整实例
2016/10/18 PHP
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
JavaScript利用正则表达式去除日期中的“-”
2014/07/01 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
javascript日期格式化方法汇总
2015/10/04 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
javascript实现随机显示星星特效
2016/01/28 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
每日十条JavaScript经验技巧(一)
2016/06/23 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
vue.js入门(3)——详解组件通信
2016/12/02 Javascript
详解Angualr 组件间通信
2017/01/21 Javascript
利用JS实现一个同Excel表现的智能填充算法
2018/08/13 Javascript
Vue-CLI 3.X 部署项目至生产服务器的方法
2019/03/22 Javascript
layui当点击文本框时弹出选择框,显示选择内容的例子
2019/09/02 Javascript
vue集成一个支持图片缩放拖拽的富文本编辑器
2021/01/29 Vue.js
Django中的Signal代码详解
2018/02/05 Python
python3利用Dlib19.7实现人脸68个特征点标定
2018/02/26 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python实现代码统计工具
2019/09/19 Python
Python中BeautifuSoup库的用法使用详解
2019/11/15 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python通过len函数返回对象长度
2020/10/22 Python
html5的localstorage详解
2017/05/09 HTML / CSS
英国度假别墅预订:Sykes Cottages
2017/06/12 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
应付会计岗位职责
2013/12/12 职场文书
中标通知书
2015/04/17 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
家长意见和建议怎么写
2015/06/04 职场文书
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers