資訊專欄INFORMATION COLUMN
摘要：下面介紹第二種方法降子域通信不支持時(shí)降子域通信不支持時(shí)，降子域通信由于和都是屬于下的子域，同源策略在前端頁(yè)面中判定依據(jù)是而不是。
歡迎大家前往騰訊云+社區(qū)，獲取更多騰訊海量技術(shù)實(shí)踐干貨哦~
本文由MarsBoy發(fā)表于云+社區(qū)專欄
| 導(dǎo)語(yǔ) Web技術(shù)飛速發(fā)展的如今，我們?cè)诟惺苄录夹g(shù)帶來(lái)的便捷和喜悅的同時(shí)，也時(shí)常在考慮著一個(gè)問題：老技術(shù)如何遷移。正如本文的主題一樣，F(xiàn)lash技術(shù)在早年風(fēng)靡在Web領(lǐng)域，曾經(jīng)發(fā)揮著無(wú)盡力量的一個(gè)工具正逐漸失去了其重要性。由于性能，兼容性，版權(quán)問題，F(xiàn)lash的市場(chǎng)正在消退，曾經(jīng)靠Flash實(shí)現(xiàn)的功能和特性如何完美得進(jìn)行遷移呢，本文將簡(jiǎn)單談一談Flash的幾個(gè)常見的特性的替代方案。
我們知道Flash可以播放.swf文件的動(dòng)畫視頻，而且具有很強(qiáng)的控制功能，以前很多Web視頻播放器都是基于Flash去實(shí)現(xiàn)的。包括embed標(biāo)簽，都是如此。所有視頻源為swf的文件的視頻都需要借助Flash去播放。
在移動(dòng)端設(shè)備上，使用HTML5的video標(biāo)簽基本沒有問題。 在PC上，IE低版本(IE8-)瀏覽器上除了Flash目前沒有其它辦法 在PC上，IE9+和其它現(xiàn)在瀏覽器，采用HTML5標(biāo)簽。 綜合來(lái)說(shuō)，可以統(tǒng)一用以下一段代碼實(shí)現(xiàn)兼容：
目前在PC端a.qq.com的頁(yè)面請(qǐng)求b.qq.com的一個(gè)接口是理論上跨域的一個(gè)請(qǐng)求，舊版本瀏覽器特別是只支持XMLHTTPRequest Level1的瀏覽器，需要訪問跨域請(qǐng)求，要么使用jsonp，要么只能使用Flash。 使用Flash進(jìn)行跨域需要做的事情是
1.a.qq.com的js與Flash交互 2.Flash校驗(yàn)安全性，檢查b.qq.com下根目錄的crossDomain.xml文件的控制訪問屬性 3.Flash作為中間代理請(qǐng)求b.qq.com 4.Flash將請(qǐng)求結(jié)果返回給a.qq.com的js 圖1簡(jiǎn)明扼要的描述了這個(gè)過程。
圖1 Flash跨域請(qǐng)求
條件：要使用CORS,必須在支持XmlHttpRequest Level2的瀏覽器中(IE10+和其它現(xiàn)代瀏覽器) 做法：設(shè)置withCredentials頭，然后結(jié)合后臺(tái)設(shè)置的Access-Control-Allow-Origin頭進(jìn)行控制，進(jìn)行跨域即可。相關(guān)代碼如下: 前端JS：
$.ajax({
url:"http://b.qq.com/api/xxx.php",
type:"POST",
xhrFields:{
withCredentials:true
},
success:function(){
//...
},
fail:function(){
//...
}
})后端PHP：
我們回到同源策略，如果要請(qǐng)求b.qq.com下的一個(gè)接口，我們從b.qq.com下的頁(yè)面發(fā)起請(qǐng)求，是遵循同源策略的。那么我們可以在接口域名下放一個(gè)統(tǒng)一的html文件，用于代理我們請(qǐng)求b.qq.com的接口，然后將結(jié)果告訴a.qq.com就可以了。 這種情況下要解決2個(gè)主要問題： 1.cookie如何發(fā)送 2.a.qq.com與b.qq.com的代理頁(yè)面前端通信 其實(shí)兩個(gè)問題是一個(gè)問題，a.qq.com下的cookie我們是可以獲取到的，同樣的cookie我們可以種在b.qq.com下的。問題歸結(jié)到第二個(gè)問題，如何在前端實(shí)現(xiàn)a.qq.com和b.qq.com兩個(gè)頁(yè)面之間的通信。 有兩個(gè)方法：
主要核心邏輯代碼可以參考： 【a.qq.com頁(yè)面代碼】
【b.qq.com頁(yè)面代碼】
以上demo簡(jiǎn)單解決了前端跨域通信，跨域帶cookie等問題，在邏輯上完全可以實(shí)現(xiàn)跨域通信。但是對(duì)于不支持PostMessage特性的老版瀏覽器是行不通的。比如IE8-瀏覽器就不能很好的支持PostMessage特性。這種情況下我們采用另外一種中轉(zhuǎn)跨域的方案：降子域通信。 下面介紹第二種方法：降子域通信：
由于a.qq.com和b.qq.com都是屬于qq.com下的子域，同源策略在前端頁(yè)面中判定依據(jù)是document.domain而不是location.host。而document.domain可寫，可以人為更改到其父域名。這樣a.qq.com和b.qq.com的兩個(gè)頁(yè)面都可以自行降到qq.com。這樣就可以直接進(jìn)行通信。 主要核心邏輯代碼可以參考： 【a.qq.com頁(yè)面代碼】
【b.qq.com頁(yè)面代碼】
在實(shí)際改造過程中，如果后端結(jié)果過多，或者改造不方便，可以直接采用第二種方式——中轉(zhuǎn)代理的方式進(jìn)行改造。其原理示意圖總結(jié)如下：
圖2 去Flash跨域請(qǐng)求改造指導(dǎo)圖
其實(shí)文件上傳是HTML規(guī)范內(nèi)的，理論上不需要使用Flash去做。但是隨著ajax技術(shù)的興起，Web 2.0時(shí)代的到來(lái)，input表單的提交改成ajax提交，頁(yè)面無(wú)刷新的形式。但是這種形式下對(duì)于文件這類二進(jìn)制文件無(wú)法提交，IE下本來(lái)有ActiveX 的FSO可以操作，但是插件的執(zhí)行需要IE安全機(jī)制允許，很多情況下用戶體驗(yàn)不好，而且兼容性也不是很好。于是這種背景下，F(xiàn)Lash又擔(dān)當(dāng)起了一個(gè)新的功能：文件上傳。 著名的jquery插件，ajaxupload.js就是用的Flash進(jìn)行文件提交。
如何不使用Flash，上傳文件，而且保證頁(yè)面不刷新，是我們?cè)谌lash上傳工作中需要做的核心。下面針對(duì)不同的瀏覽器提供兩套方案：
條件：支持HTML5 FileReader 和FormData 特性 做法：
1.獲取input表單的files對(duì)象 2.實(shí)例化FileReader對(duì)象，并解析files對(duì)象 3.解析之后輸出base64編碼的文件數(shù)據(jù) 4.base64的數(shù)據(jù)傳入FormData 5.ajax提交FormData
參考demo如下：
條件：無(wú)任何條件，支持任何瀏覽器 做法：
1.在頁(yè)面上構(gòu)建一個(gè)隱藏的iframe 2.在頁(yè)面上構(gòu)建一個(gè)form表單，表單中包含文件表單和其它附加字段表單,target設(shè)為上述iframe的id 3.上傳文件動(dòng)作觸發(fā)時(shí)，調(diào)用form的submit方法 4.iframe中加載上傳cgi，返回結(jié)果與父窗口通信，如果iframe與cgi跨域，則參考【第二部分：跨域請(qǐng)求】進(jìn)行處理
參考demo如下：
DEMO-上傳文件
總結(jié) 本文給出了筆者在實(shí)際工作中遇到的最常見的去Flash改造的三種場(chǎng)景，現(xiàn)以表格的形式簡(jiǎn)單概括如下：
| 現(xiàn)代H5 | 早期低版本IE等 | |
|---|---|---|
| 視頻播放 | 使用H5的video標(biāo)簽 | 沒辦法只能使用FLash，如果不用Flash，建議提醒用戶升級(jí)瀏覽器 |
| 跨域提交請(qǐng)求 | 使用CORS，前后端結(jié)合 | 中轉(zhuǎn)代理（PostMessage或者降域） |
| Ajax文件上傳 | 使用FileReader+FormData封裝 | 模擬表單提交到iframe |
結(jié)語(yǔ)去Flash不僅是對(duì)實(shí)現(xiàn)方案的一種兼容改造，更是對(duì)早已成熟的新技術(shù)新思路的運(yùn)用。目前而言，不管是因?yàn)檎咴?，還是因?yàn)樾阅芑蛘咂渌嫒菪栽?，去Flash改造都是重要和緊迫的，本文是筆者在實(shí)際工作過程中總結(jié)出的最常見的三種去Flash場(chǎng)景和改造方案，供參考，不足之處還請(qǐng)不吝指正。
相關(guān)閱讀
再論 ASP.NET 中獲取客戶端IP地址
從零開始的Spring Session
【每日課程推薦】機(jī)器學(xué)習(xí)實(shí)戰(zhàn)！快速入門在線廣告業(yè)務(wù)及CTR相應(yīng)知識(shí)
此文已由作者授權(quán)騰訊云+社區(qū)發(fā)布，更多原文請(qǐng)點(diǎn)擊
搜索關(guān)注公眾號(hào)「云加社區(qū)」，第一時(shí)間獲取技術(shù)干貨，關(guān)注后回復(fù)1024 送你一份技術(shù)課程大禮包！
海量技術(shù)實(shí)踐經(jīng)驗(yàn)，盡在云加社區(qū)！
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1692.html
摘要：還有一個(gè)值得關(guān)注的是加密媒體擴(kuò)展標(biāo)準(zhǔn)其支持用原生和開發(fā)播放加密視頻。專業(yè)流媒體發(fā)布商將無(wú)法依靠微軟的技術(shù)在和安卓設(shè)備上的火狐來(lái)加密自己的內(nèi)容。因此，不同的系統(tǒng)組合，如用于和安卓的，用于和的，還有用于的。 英文原文：HTML5 Media Source Extensions: Bringing Production Video To The Web 在過去的十幾年，像Flash和Silv...
摘要：還有一個(gè)值得關(guān)注的是加密媒體擴(kuò)展標(biāo)準(zhǔn)其支持用原生和開發(fā)播放加密視頻。專業(yè)流媒體發(fā)布商將無(wú)法依靠微軟的技術(shù)在和安卓設(shè)備上的火狐來(lái)加密自己的內(nèi)容。因此，不同的系統(tǒng)組合，如用于和安卓的，用于和的，還有用于的。 英文原文：HTML5 Media Source Extensions: Bringing Production Video To The Web 在過去的十幾年，像Flash和Silv...
摘要：和格式的瀏覽器兼容性移動(dòng)端因?yàn)樘O果公司對(duì)的強(qiáng)烈抵制以及自己定的視頻協(xié)議，所以在端原生支持格式的視頻播放而不支持的播放，而且因?yàn)樘O果在移動(dòng)端的領(lǐng)頭作用，所以其他移動(dòng)端包括瀏覽器也都原生支持格式的視頻播放。 因?yàn)檎`打誤撞來(lái)到了淘寶直播團(tuán)隊(duì)，從開始完全不了解直播技術(shù)，現(xiàn)在因?yàn)閘eader暫時(shí)的離開，準(zhǔn)備接手h5播放器的迭代，就不得不開始了解相關(guān)的視頻技術(shù)，先整理一下在直播技術(shù)中的視頻格式和不...
閱讀 1811·2023-04-26 00:47
閱讀 1560·2021-11-11 16:55
閱讀 2640·2021-09-27 14:04
閱讀 3568·2021-09-22 15:58
閱讀 3566·2021-07-26 23:38
閱讀 2146·2019-08-30 13:47
閱讀 1994·2019-08-30 13:15
閱讀 1161·2019-08-29 17:09
