摘要:本文主要向大家介绍了Flash基础入门之如何替代即将淘汰的Flash方案?通过具体的内容向大家展现,希望对大家学习Flash基础入门有所帮助。
本文主要向大家介绍了Flash基础入门之如何替代即将淘汰的Flash方案?通过具体的内容向大家展现,希望对大家学习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 -->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:"//b.qq.com/api/xxx.php", type:"POST", xhrFields:{ withCredentials:true后端PHP:
<?php//b.qq.com的接口中添加Access-Control-Allow-Origin头header("Access-Control-Allow-Origin://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>【b.qq.com页面代码】
<!DOCTYPE html><html><head>以上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>【b.qq.com页面代码】
<!DOCTYPE html><html><head>在实际改造过程中,如果后端结果过多,或者改造不方便,可以直接采用第二种方式——中转代理的方式进行改造。其原理示意图总结如下:
图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>3.2.2 【第二套方案】低版本浏览器中用模拟表单提交
条件:无任何条件,支持任何浏览器 做法:
1.在页面上构建一个隐藏的iframe 2.在页面上构建一个form表单,表单中包含文件表单和其它附加字段表单,target设为上述iframe的id 3.上传文件动作触发时,调用form的submit方法 4.iframe中加载上传cgi,返回结果与父窗口通信,如果iframe与cgi跨域,则参考【第二部分:跨域请求】进行处理
参考demo如下:
<!DOCTYPE html>以上就介绍了Flash的相关知识,希望对Flash有兴趣的朋友有所帮助。了解更多内容,请关注职坐标常用软件Flash频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号