如何替代即将淘汰的Flash方案?
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~
| 导语 web技术飞速发展的如今,我们在感受新技术带来的便捷和喜悦的同时,也时常在考虑着一个问题:老技术如何迁移。正如本文的主题一样,flash技术在早年风靡在web领域,曾经发挥着无尽力量的一个工具正逐渐失去了其重要性。由于性能,兼容性,版权问题,flash的市场正在消退,曾经靠flash实现的功能和特性如何完美得进行迁移呢,本文将简单谈一谈flash的几个常见的特性的替代方案。
1.视频播放(play video)
我们知道flash可以播放.swf文件的动画视频,而且具有很强的控制功能,以前很多web视频播放器都是基于flash去实现的。包括embed标签,都是如此。所有视频源为swf的文件的视频都需要借助flash去播放。
解决方案:
在移动端设备上,使用html5的video标签基本没有问题。 在pc上,ie低版本(ie8-)浏览器上除了flash目前没有其它办法 在pc上,ie9+和其它现在浏览器,采用html5标签。 综合来说,可以统一用以下一段代码实现兼容:
<video width="400" height="300" controld> <!-- mp4格式适用于ie9+,chrome,safari --> <source src="test.mp4" type="video/mp4"></source> <!-- ogg格式适用于firefox,opera,chrome --> <source src="test.ogg" type="video/ogg"></source> <!-- webm格式适用于firefox,opera,chrome --> <source src="test.webm" type="video/webm"></source> <!-- object需要flash支持,当ie8-时考虑 --> <object data="test.mp4" width="400" height="300"> <!-- embed需要flash支持,当ie8-时考虑 --> <embed src="test.swf" width="400" height="300"> </object> </video>
2.跨域请求(corss origin request)
2.1使用flash进行跨域请求的方案实现
目前在pc端a.qq.com的页面请求b.qq.com的一个接口是理论上跨域的一个请求,旧版本浏览器特别是只支持xmlhttprequest level1的浏览器,需要访问跨域请求,要么使用jsonp,要么只能使用flash。 使用flash进行跨域需要做的事情是
1.a.qq.com的js与flash交互 2.flash校验安全性,检查b.qq.com下根目录的crossdomain.xml文件的控制访问属性 3.flash作为中间代理请求b.qq.com 4.flash将请求结果返回给a.qq.com的js 图1简明扼要的描述了这个过程。
图1 flash跨域请求
2.2 去flash跨域如何实现
情况一:cors(cross-origin resource sharing)【后端需改造】
条件:要使用cors,必须在支持xmlhttprequest level2的浏览器中(ie10+和其它现代浏览器) 做法:设置withcredentials头,然后结合后台设置的access-control-allow-origin头进行控制,进行跨域即可。相关代码如下: 前端js:
$.ajax({ url:"http://b.qq.com/api/xxx.php", type:"post", xhrfields:{ withcredentials:true }, success:function(){ //... }, fail:function(){ //... } })
后端php:
<?php //b.qq.com的接口中添加access-control-allow-origin头 header("access-control-allow-origin:http://a.qq.com");
情况二:中转代理请求【建议】
我们回到同源策略,如果要请求b.qq.com下的一个接口,我们从b.qq.com下的页面发起请求,是遵循同源策略的。那么我们可以在接口域名下放一个统一的html文件,用于代理我们请求b.qq.com的接口,然后将结果告诉a.qq.com就可以了。 这种情况下要解决2个主要问题: 1.cookie如何发送 2.a.qq.com与b.qq.com的代理页面前端通信 其实两个问题是一个问题,a.qq.com下的cookie我们是可以获取到的,同样的cookie我们可以种在b.qq.com下的。问题归结到第二个问题,如何在前端实现a.qq.com和b.qq.com两个页面之间的通信。 有两个方法:
1.使用html5规范的postmessage特性
主要核心逻辑代码可以参考: 【a.qq.com页面代码】
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script> //a.qq.com中逻辑: var $proxyframe=$("<iframe style='display:none' src='http://b.qq.com/proxy.html'></iframe>").appendto(document.body); //等待iframe中转页面load完毕 $proxyframe.on("load",function(){ //调中转页面 $proxyframe.get(0).contentwindow.postmessage({ api:"/xx/y", data:{ a:1, b:2 }, cookie:document.cookie//带过去的cookie }); //回调 $(window).on("message",function(e){ var event=e.originalevent; if(event.origin=="http://b.qq.com"){ console.log("response data:",event.data); } }) }) </script> </body> </html>
【b.qq.com页面代码】
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script> //b.qq.com中逻辑: $(window).on("message",function(e){ var event=e.originalevent; if(event.origin=="http://a.qq.com"){ var api=event.data.api; var data=event.data.data; var cookie=event.data.cookie; //种植cookie //.........种植cookie的操作 //代理请求接口 $.ajax({ url:api, data:data, //....... success:function(result){ //将response返回给a.qq.com window.parent.postmessage(result,"*") }, fail:function(){ } }) } }) </script> </body> </html>
以上demo简单解决了前端跨域通信,跨域带cookie等问题,在逻辑上完全可以实现跨域通信。但是对于不支持postmessage特性的老版浏览器是行不通的。比如ie8-浏览器就不能很好的支持postmessage特性。这种情况下我们采用另外一种中转跨域的方案:降子域通信。 下面介绍第二种方法:降子域通信:
2.不支持postmessage时,降子域通信
由于a.qq.com和b.qq.com都是属于qq.com下的子域,同源策略在前端页面中判定依据是document.domain而不是location.host。而document.domain可写,可以人为更改到其父域名。这样a.qq.com和b.qq.com的两个页面都可以自行降到qq.com。这样就可以直接进行通信。 主要核心逻辑代码可以参考: 【a.qq.com页面代码】
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script> //a.qq.com中逻辑: document.domain="qq.com"; var $crossframe=$("<iframe style='display:none' src='http://b.qq.com/proxy.html'></iframe>").appendto(document.body); //等待iframe中转页面load完毕 $crossframe.on("load",function(){ //回调 window['callback']=function(result){ //收到响应 console.log("receive response:",result); } //调中转页面中的方法直接请求 $crossframe.get(0).contentwindow.request({ api:"/xx/y", data:{ a:1, b:2 } }); }) </script> </body> </html>
【b.qq.com页面代码】
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <script> //b.qq.com中逻辑: document.domain="qq.com"; window.request=function(api,data){ $.ajax({ url:api, data:data, //....... success:function(result){ //将response返回给a.qq.com window.parent.callback(result,"*") }, fail:function(){ } }) } </script> </body> </html>
在实际改造过程中,如果后端结果过多,或者改造不方便,可以直接采用第二种方式——中转代理的方式进行改造。其原理示意图总结如下:
图2 去flash跨域请求改造指导图
3.文件上传
3.1 背景
其实文件上传是html规范内的,理论上不需要使用flash去做。但是随着ajax技术的兴起,web 2.0时代的到来,input表单的提交改成ajax提交,页面无刷新的形式。但是这种形式下对于文件这类二进制文件无法提交,ie下本来有activex 的fso可以操作,但是插件的执行需要ie安全机制允许,很多情况下用户体验不好,而且兼容性也不是很好。于是这种背景下,flash又担当起了一个新的功能:文件上传。 著名的jquery插件,ajaxupload.js就是用的flash进行文件提交。
3.2去flash上传
如何不使用flash,上传文件,而且保证页面不刷新,是我们在去flash上传工作中需要做的核心。下面针对不同的浏览器提供两套方案:
3.2.1 【第一套方案】html5获取文件信息用formdata提交
条件:支持html5 filereader 和formdata 特性 做法:
1.获取input表单的files对象 2.实例化filereader对象,并解析files对象 3.解析之后输出base64编码的文件数据 4.base64的数据传入formdata 5.ajax提交formdata
参考demo如下:
<!doctype html> <html> <head> <meta charset="utf-8"> </head> <body> <input type="file" name="test" id="test" /> <script> $("#test").change(function(e){ var files=e.target.files; va fr=new filereader(); fr.onload=function(e){ var fm=new formdata(); fm.append("file_test",e.target.result); //额外参数 fm.append("sextend","test"); //提交ajax $.ajax({ url:'http://b.qq.com/cgi/', type:"post", datatype:json, data:fm, processdata: false, // 不会将 data 参数序列化字符串 contenttype: false, // 根据表单 input 提交的数据使用其默认的 contenttype success:function(result){ console.log(result); }, fail:function(){ console.log("failed"); } }); } fr.readasdataurl(files[0]); }); </script> </body> </html>
3.2.2 【第二套方案】低版本浏览器中用模拟表单提交
条件:无任何条件,支持任何浏览器 做法:
1.在页面上构建一个隐藏的iframe 2.在页面上构建一个form表单,表单中包含文件表单和其它附加字段表单,target设为上述iframe的id 3.上传文件动作触发时,调用form的submit方法 4.iframe中加载上传cgi,返回结果与父窗口通信,如果iframe与cgi跨域,则参考【第二部分:跨域请求】进行处理
参考demo如下:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>demo-上传文件</title> </head> <body> <!-- 以a.qq.com上传到b.qq.com/upload/为例 --> <form action="http://b.qq.com/upload/" enctype="multipart/form-data" method="post" target="postframe" name="fileform"> <!-- 文件上传按钮 --> <input type="file" name="file_1" /> <!-- 隐藏的附加字段 --> <input type="hidden" name="sextend1" value="test1" /> <input type="hidden" name="sextend2" value="test2" /> </form> <iframe src="" frameborder="0" style="display:none;" id="postframe"></iframe> <script> //监听文件基本信息 $("[name=file_1]").change(function(e){ var files=e.target.files; if("undefined" == typeof files && e.target.value){ //ie9- files=[]; try{ files=[new activexobject("scripting.filesystemobject").getfile(e.target.value)]; }catch(err){ files=[{ name:e.target.value, type:"unkown" }]; } if(!files.length){ files=[{ name:e.target.value, type:"unkown" }]; } } //获取文件信息 console.log(files); }) //上传 $("[name=fileform]").submit(); //回调 window.filecallback=function(result){ //处理result console.log("文件上传成功"); } </script> </body> </html>
总结
本文给出了笔者在实际工作中遇到的最常见的去flash改造的三种场景,现以表格的形式简单概括如下:
现代h5 | 早期低版本ie等 | |
---|---|---|
视频播放 | 使用h5的video标签 | 没办法只能使用flash,如果不用flash,建议提醒用户升级浏览器 |
跨域提交请求 | 使用cors,前后端结合 | 中转代理(postmessage或者降域) |
ajax文件上传 | 使用filereader+formdata封装 | 模拟表单提交到iframe |
结语
去flash不仅是对实现方案的一种兼容改造,更是对早已成熟的新技术新思路的运用。目前而言,不管是因为政策原因,还是因为性能或者其它兼容性原因,去flash改造都是重要和紧迫的,本文是笔者在实际工作过程中总结出的最常见的三种去flash场景和改造方案,供参考,不足之处还请不吝指正。
相关阅读
再论 asp.net 中获取客户端ip地址
从零开始的spring session
【每日课程推荐】机器学习实战!快速入门在线广告业务及ctr相应知识
此文已由作者授权腾讯云+社区发布,更多原文请点击
搜索关注公众号「云加社区」,第一时间获取技术干货,关注后回复1024 送你一份技术课程大礼包!
海量技术实践经验,尽在云加社区!
上一篇: 如何替代即将淘汰的Flash方案?
下一篇: 027.1 反射技术 Class