他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

么去控制瀏覽器對資源文件的處理行為

2018-6-26    seo達人

如果您想訂閱本博客內容,每天自動發到您的郵箱中, 請點這里

通常當用戶打開一個資源的url,如果瀏覽器支持這個格式的文件的情況下,瀏覽器會嘗試去再頁面里展示它而不是直接下載。例如一張圖片(jpg, png, gif等),幾乎所有瀏覽器都會去將圖片在瀏覽器里面展示。


對于壓縮格式的文件(zip, tar, gzip等)瀏覽器總是會直接去下載它們,另外一些格式的文件,根據瀏覽器的不同也會有差異的處理方法,例如Microsoft Word文件(doc, docx)在ie瀏覽器下通常會在瀏覽器中展示,但是其他瀏覽器幾乎都會直接下載它,同樣的對于PDF文件chrome有自己的pdf 轉換器它會嘗試去在瀏覽器上展示該文件。

強制下載文件

對于瀏覽器這種行為,一般情況下是可以接受的,因為用戶可以在瀏覽器顯示文件后將文件保存到電腦中,但是一些情況下用戶可能希望文件直接被下載而不是在瀏覽器中被打開,比如有時候用戶想去下載一個歌曲,但是瀏覽器可能回去播放該音頻。那么怎么讓瀏覽器強制去下載文件要怎么做呢

a標簽的download屬性

html5中 a 標簽新增了 download 屬性,該屬性指示瀏覽器下載url的內容而不是導航到url,因此如果配置了此屬性用戶會直接下載url的內容。作為開發如果想直接觸發該事件我們可以直接用代碼模擬a標簽和點擊事件


    
  1. const link = document.createElement('a');
  2. link.addEventListener('click', function() {
  3. link.download = xxx;
  4. link.href = xxx;
  5. });
  6. const e = document.createEvent('MouseEvents');
  7. e.initEvent('click', false, false);
  8. link.dispatchEvent(e);
  • download屬性只在同域時候有效,當跨域請求時候該屬性將會被忽略。
  • 當前并非所以瀏覽器都支持該屬性,需要瀏覽器考慮兼容性。

改變資源格式

瀏覽器會根據資源類型去判斷是否支持,如果支持時會嘗試去在頁面上展示該資源。瀏覽器判斷資源類型是根據返回頭Content-Type的值,因此一方面我們在服務端可以設置返回頭字段為文件流'Content-Type': 'application/octet-stream',或者根據一些具體資源直接壓縮后傳輸,瀏覽器不能分析zip之類的壓縮文件所以會直接去下載它們。

配置Content-Disposition

在HTTP場景中,Content-Disposition 消息頭指示回復的內容該以何種形式展示,是以內聯的形式(即網頁或者頁面的一部分),還是以附件的形式下載并保存到本地。

  • inline 默認參數表示消息體會以頁面的一部分或者整個頁面的形式展示。
  • attachment 消息體應該被下載到本地,將參數filename的值預填為下載后的文件名

因此當我們希望該資源被直接下載時候,我們可以設置返回頭Content-Disposition的值為attachment


    
  1. //example
  2. Content-Disposition: attachment; filename="fname.ext"

這里設置名稱時候,要注意下filename的編碼格式。

用戶自己在瀏覽器設置

瀏覽器既然定義了該行為,根據瀏覽器的不同用戶可能在設置頁面去配置某些格式的文件是否希望瀏覽器去展示該文件。一些有爭議的情況下,你也可以提示用戶自己根據需求去設置這些參數。


藍藍設計m.ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://m.ssll180.com

存檔