| 导语 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 controld> <!-- mp4格式适用于IE9+,Chrome,Safari --> <source src="http://www.likecs.com/test.mp4" type="video/mp4"></source> <!-- ogg格式适用于FireFox,Opera,Chrome --> <source src="http://www.likecs.com/test.ogg" type="video/ogg"></source> <!-- webm格式适用于FireFox,Opera,Chrome --> <source src="http://www.likecs.com/test.webm" type="video/webm"></source> <!-- object需要Flash支持，当IE8-时考虑 --> <object data="http://www.likecs.com/test.mp4"> <!-- embed需要Flash支持，当IE8-时考虑 --> <embed src="http://www.likecs.com/test.swf"> </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简明扼要的描述了这个过程。
条件：要使用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:"); 情况二：中转代理请求【建议】我们回到同源策略，如果要请求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 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>