JS与AS3.0的交互
Javascript 10-3 680浏览 0评论1、首先，在网页中添加FLASH的方法有很多种。可是往往通过设计常用软件DW直接添加的<object>标签里会带有很多乱七八糟的代码，以及几个非常长的JS。其实这些都是不必要的。于是我们来记一个最简单的添加FLASH的代码（比如我们要加的FLASH是名字是bigface.swf）： <objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"id="myFlash" width="400" height="180" align="middle"> <paramname="allowScriptAccess" value="sameDomain" /> <param name="movie"value="bigface.swf）" /> <param name="quality"value="high" /> <embed src="bigface.swf）" width="400" height="180" quality="high" swLiveConnect=true name="myFlash" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"/> </object> 在这些标签中，红色标注的标签是为我们做交互必须写入的标签。 2.AS调用JS方法 AS调用JS的方法是很简单的。首先我们在插入FLASH之后，写下我们想要让AS调用的JS方法。 比如我们想做一个案例（案例1），是一个希望在FLASH输入什么，只要一点击，就让网页里alert()出来什么。 首先，我得在网页中插入bigface.swf（按照第一步讲的）。 然后我们在JS里写下如下代码： <scripttype="text/javascript"> functiontell(text){ alert(text); } </script> 这是个很简单的弹出框语句。如果能让FLASH调用到这个语句，并且把要传递的数值传出来就成功了。 接着，我们在FLASH里做下面事情： 建立一个输入框，取名mytext; 建立一个按钮，取名btn; 然后写下下面的AS： btn.addEventListener(MouseEvent.CLICK,sendout); function sendout(event:MouseEvent):void{ ExternalInterface.call("tell",mytext.text) } 这里具体讲解一下 我们给按钮btn 添加了一个鼠标监听事件，事件类型是鼠标点击，触发后执行sendout这个函数。这个函数里的命令就是ExternalInterface.call("tell",mytext.text)，调用外部（也就是JS里的）tell这个函数，赋予的参数就是我们输入框里的文字mytext.text。 然后重新输出一遍FLASH，我们的案例就完成了。 2、JS调用AS 我们同样首先载入一个叫bigface.swf的FLASH 我们在FLASH里只加一个叫mytext的文本框。 然后我们在网页中写下一下网页标签： </br> </br> <input type="text"id="shuru" /> <button type="button"id="enter">点击</button> 之后我们先到AS里写下： function putin(thetext:String):void{ mytext.text =thetext; } ExternalInterface.addCallback("sendtxt",putin) 写完后，网页中修改并加入JS如下： <input type="text" id="shuru"/> <button type="button" id="enter"οnclick="sendin()">点击</button> <script type="text/javascript"> functionsendin(){ var t = document.getElementById("shuru").value; window.document.myFlash.sendtxt(t); } </script> 这样我们就实现了JS调用AS的函数并达到了传值。
javascript与as3交互
Javascript 10-3 821浏览 0评论模拟事件 在as3中,无论是调用js的方法,还是暴露接口给js,都是用ExternalInterface这个api. 暴露接口:ExternalInterface.addCallback(函数名, 函数) 调用js方法:ExternalInterface.call(方法名, 参数) 这里所说的模拟事件,就是在falsh素材的各个状态切换时,通知页面.如加载完毕时,触发onload事件,播放时触发onplay,停止时触发onstop等等. 采用的方案,是在object标签里,添加自定义的属性供as3调用,属性名是flash定死的:flashvars,值的格式类似url里的参数部分,为用&分隔的键值对,如下: 01 在as3中,这样读取属性: flashvars= LoaderInfo( this.root.loaderInfo ).parameters; flashvars是一个object变量,定义如下: private var flashvars:Object; 读取后,flashvars的值: Object {onload: "advnr70wyu5xncanvpwzzo0pory66", onplay: "advf4q8r99cfnryhn2tk2n3s48kf0", onstop: "adv7sgjk0529cd00q6ojuf537"} 对象的key为事件名,值为事件处理函数名,所有事件处理函数都在window.flashCallback命名空间下,并且名字是随机生成的不可重复的guid. 在as3里,我们判断是否支持调用js函数: ExternalInterface.available 以onload事件为例,在素材加载完毕后,如果支持调用js函数,则触发onload事件: //素材加载完毕,调用onload private function onload():void { if (ExternalInterface.available) { textField.text = 'onload'; if(flashvars.onload){ ExternalInterface.call("window.flashCallback." + flashvars.onload); } } } 上面提到,函数名是随机生成的,类似jquery的$.ajax方法里的callback实现方式,以下是封装过的生成object标签的方法: //adv.flash.embed是封装过的生成object标签的方法 asyncTest('flash标签自定义事件', function () { expect(3); document.body.appendChild(adv.flash.embed({ id: 'flashGetSWF', source: 'test.swf', params: { onload: function () { this.play(); ok(true); }, onplay: function () { ok(true); this.stop(); }, onstop: function () { ok(true); start(); } } })); }); 几个回调函数都是匿名函数,在生成标签之前,会给函数在window.flashCallback下分配一个随机名称.现在只是简单的实现单个事件处理函数的绑定,如果有需要支持多个,只要再做一些简单的封装即可. adv.flash.embed的实现要点: //遍历自定义参数 adv.util.forEach(params, function (value, key) { var funcVar = value; if (adv.util.isFunction(value)) { //如果是函数,则生成一个随机的名称,并存储在flashCallback命名空间下 funcVar = adv.util.guid(); window.flashCallback[funcVar] = function() { var swfObj = adv.flash.getSWF(id); //this指向flash对象本身 value.apply(swfObj, arguments); }; } paramArr.push(key + '=' + funcVar); }); 执行结果: 02 暴露接口给js as3里,实现这个很简单,先上代码再说: public function test() { flashvars= LoaderInfo( this.root.loaderInfo ).parameters; //此为调试用 ExternalInterface.call("window.flashCallback.trace",flashvars); //加载素材 textField.width=200; textField.height = 90; addChild(textField); //素材加载完毕,准备播放 //暴露api给js if(ExternalInterface.available){ ExternalInterface.addCallback("play", play); ExternalInterface.addCallback("stop", stop); } //触发onload onload(); } //这个方法被调用时,开始播放 private function play():Boolean { textField.text = 'play'; if(flashvars.onplay){ ExternalInterface.call("window.flashCallback." + flashvars.onplay); } return true; } //这个方法被调用时,停止播放 private function stop():Boolean { textField.text = 'stop'; if(flashvars.onstop){ ExternalInterface.call("window.flashCallback." + flashvars.onstop,flashvars); } return true; } 这里定义了两个方法,play和stop,在构造函数(test)里,判断ExternalInterface是否可用,如果可用,就暴露出这两个方法: ExternalInterface.addCallback("play", play); ExternalInterface.addCallback("stop", stop); 在js里调用: 跨浏览器的获取flash对象引用方法 ... getSWF:function(name) { if (navigator.appName.indexOf("Microsoft") != -1) { return window[name]; } else { return document[name]; } } ... 暴露出的as3方法,会直接附加在object对象上,要注意的是,我们要等onload之后才去调用,保证falsh加载完毕: asyncTest('js调用flash方法', function () { expect(1); document.body.appendChild(adv.flash.embed({ id: 'flashcallSWF', source: 'test.swf', width: 300, height: 190, params: { onload: function () { var result = this.play(); ok(result); start(); } } })); }); 事件函数的this指向flash对象,所以这里不用再获取了 执行结果: 03 完整的as3代码: package { import flash.display.LoaderInfo; import flash.display.Sprite; import flash.external.ExternalInterface; import flash.text.TextField; public class test extends Sprite { private var flashvars:Object; //用textField文本的改变来代表广告播放的状态转变 private var textField:TextField = new TextField(); public function test() { flashvars= LoaderInfo( this.root.loaderInfo ).parameters; //加载素材 textField.width=200; textField.height = 90; addChild(textField); //素材加载完毕,准备播放 //暴露api给js if(ExternalInterface.available){ ExternalInterface.addCallback("play", play); ExternalInterface.addCallback("stop", stop); } //触发onload onload(); } //这个方法被调用时,开始播放 private function play():Boolean { textField.text = 'play'; if(flashvars.onplay){ ExternalInterface.call("window.flashCallback." + flashvars.onplay); } return true; } //这个方法被调用时,停止播放 private function stop():Boolean { textField.text = 'stop'; if(flashvars.onstop){ ExternalInterface.call("window.flashCallback." + flashvars.onstop,flashvars); } return true; } private function onload():void { if (ExternalInterface.available) { textField.text = 'onload'; if(flashvars.onload){ ExternalInterface.call("window.flashCallback." + flashvars.onload); } } } } }
jquery无刷新请求ajax
Javascript 10-28 810浏览 0评论jquery ajax请求的详细用法，ajax的好处就是不用刷新页面就能做到局部数据更新的效果，常见的地方比如，用户注册检测有没有重名，无刷新上传文件，提交数据等。 $.ajax({ url:'test.php?type=1&id='+id, //url带参数 type:'GET', //请求方式 cache:false, //缓存 success: function(data){ //请求成功后返回数据data $('body').html(data); } }); $.ajax({ url:'test.php, //请求url地址 type:'POST', //请求方式 cache:false, //缓存 dataType:'text', //数据类型 data:{ //请求的数据参数 type:1, name:test, sex:1 }, success: function(data){ //请求成功后返回数据data $('body').html(data); } error:function（）{ alert('请求出错'); } });
url参数中出现+、空格、=、%、&、#等字符的解决办法
HTML5 3-8 1023浏览 0评论url出现了有+，空格，/，?，%，#，&，=等特殊符号的时候，可能在服务器端无法获得正确的参数值，如何是好？ 解决办法 将这些字符转化成服务器可以识别的字符，对应关系如下： URL字符转义 用其它字符替代吧，或用全角的。 + URL 中+号表示空格 %2B 空格 URL中的空格可以用+号或者编码 %20 / 分隔目录和子目录 %2F ? 分隔实际的URL和参数 %3F % 指定特殊字符 %25 # 表示书签 %23 & URL 中指定的参数间的分隔符 %26 = URL 中指定参数的值 %3D
Table显示滚动条
HTML5 2-29 795浏览 0评论Table显示滚动条，要先把table放到一个div中，div的长度和宽度要固定，控制overflow属性为scroll <div style="width:700px; height:225px; overflow:scroll;"> ... </div> table的长度和宽度也要固定 <table cellspacing="0" width="732px" id="dataTableDetail" align="center"> ... </table> 如果你只要设置垂直的滚动条则用：overflow-y:scroll。
JQUERY方法给TABLE动态增加行
HTML5 2-29 858浏览 0评论比如设置table的id为tab var trHTML = "<tr><td>...</td></tr>" $("#tab").append(trHTML);//在table最后面添加一行
jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
Javascript 1-25 1569浏览 2评论现在常常能看到一些网站（如：新浪微博和花瓣）导航条或工具栏固定在网页的顶部或其他地方。这样的布局方式，能便于用户点击和“曝光率”，不用每次都要把网页拖动到某个特定位置才能点击或看到。
随机文章
- 2016-02-24 浏览量 评论
- 2016-02-25 浏览量 评论
- 2016-02-25 浏览量 评论
- 2016-02-26 浏览量 评论
- 2016-02-26 浏览量 评论
- 2016-02-26 浏览量 评论
- 2016-02-26 浏览量 评论
- 2016-02-26 浏览量 评论
- 2016-02-26 浏览量 评论
- 2016-02-26 浏览量 评论
最新评论
江湖- 江湖
- 江湖
