資訊專欄INFORMATION COLUMN
摘要：瀏覽器是怎么處理文件鏈接的通常當用戶打開一個資源的如果瀏覽器支持這個格式的文件的情況下，瀏覽器會嘗試去再頁面里展示它而不是直接下載。
瀏覽器是怎么處理文件鏈接的
通常當用戶打開一個資源的url,如果瀏覽器支持這個格式的文件的情況下，瀏覽器會嘗試去再頁面里展示它而不是直接下載。例如一張圖片(jpg, png, gif等)，幾乎所有瀏覽器都會去將圖片在瀏覽器里面展示。
對于壓縮格式的文件(zip, tar, gzip等)瀏覽器總是會直接去下載它們，另外一些格式的文件，根據(jù)瀏覽器的不同也會有差異的處理方法，例如Microsoft Word文件(doc, docx)在ie瀏覽器下通常會在瀏覽器中展示，但是其他瀏覽器幾乎都會直接下載它，同樣的對于PDF文件chrome有自己的pdf 轉換器它會嘗試去在瀏覽器上展示該文件。
強制下載文件對于瀏覽器這種行為，一般情況下是可以接受的，因為用戶可以在瀏覽器顯示文件后將文件保存到電腦中，但是一些情況下用戶可能希望文件直接被下載而不是在瀏覽器中被打開，比如有時候用戶想去下載一個歌曲，但是瀏覽器可能回去播放該音頻。那么怎么讓瀏覽器強制去下載文件要怎么做呢
a標簽的download屬性html5中 a 標簽新增了 download 屬性，該屬性指示瀏覽器下載url的內(nèi)容而不是導航到url，因此如果配置了此屬性用戶會直接下載url的內(nèi)容。作為開發(fā)如果想直接觸發(fā)該事件我們可以直接用代碼模擬a標簽和點擊事件
const link = document.createElement("a");
link.addEventListener("click", function() {
link.download = xxx;
link.href = xxx;
});
const e = document.createEvent("MouseEvents");
e.initEvent("click", false, false);
link.dispatchEvent(e);
改變資源格式download屬性只在同域時候有效，當跨域請求時候該屬性將會被忽略。
當前并非所以瀏覽器都支持該屬性，需要瀏覽器考慮兼容性。
瀏覽器會根據(jù)資源類型去判斷是否支持，如果支持時會嘗試去在頁面上展示該資源。瀏覽器判斷資源類型是根據(jù)返回頭Content-Type的值，因此一方面我們在服務端可以設置返回頭字段為文件流"Content-Type": "application/octet-stream"，或者根據(jù)一些具體資源直接壓縮后傳輸，瀏覽器不能分析zip之類的壓縮文件所以會直接去下載它們。
配置Content-Disposition在HTTP場景中，Content-Disposition 消息頭指示回復的內(nèi)容該以何種形式展示，是以內(nèi)聯(lián)的形式（即網(wǎng)頁或者頁面的一部分），還是以附件的形式下載并保存到本地。
inline 默認參數(shù)表示消息體會以頁面的一部分或者整個頁面的形式展示。
attachment 消息體應該被下載到本地，將參數(shù)filename的值預填為下載后的文件名
因此當我們希望該資源被直接下載時候，我們可以設置返回頭Content-Disposition的值為attachment。
//example
Content-Disposition: attachment; filename="fname.ext"
這里設置名稱時候，要注意下filename的編碼格式。
用戶自己在瀏覽器設置瀏覽器既然定義了該行為，根據(jù)瀏覽器的不同用戶可能在設置頁面去配置某些格式的文件是否希望瀏覽器去展示該文件。一些有爭議的情況下，你也可以提示用戶自己根據(jù)需求去設置這些參數(shù)。
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/95818.html
摘要：其關鍵路徑如下圖所示圖緩存關鍵路徑三關鍵路徑之驗證緩存瀏覽器發(fā)起一個請求，生成報文，先發(fā)送到緩存器，緩存器驗證是否有本地緩存，緩存是否過期等，即圖的第一條路徑，稱之為驗證緩存。 一、證件照場景 拍一次證件照麻煩且費錢，因此每次拍的時候我們都會多留幾張備用。這就是計算機世界的緩存，在現(xiàn)實世界中的寫照。 如果某個行為很消耗資源，很麻煩，那在實現(xiàn)它的時候就順便多保留幾份，這種行為就是緩存。特...
摘要：接下來看看瀏覽器是怎么處理預測瀏覽器行為瀏覽器下載圖片應該獨立于的構建。那么相應的瀏覽器就會下載不可見的。因為如果瀏覽器在構建前開始下載，它是沒有辦法知道這張圖片是不是需要展示在頁面上。 原文鏈接：https://csswizardry.com/2018/... 背景資料 為了更好地控制產(chǎn)品主頁縮略圖的顯示，（作者）團隊選擇了css的background-image而不是標簽上能解決這...
前提 本文涉及幾個知識點：fetch、caches、indexDB 等都不會詳細介紹，僅對于其中某些點帶過 一. 概念 serviceWorker，服務工作線程，顧名思義，只是作為工作線程存在，不摻和到JS主線程中來，介于 瀏覽器 & 服務器中間層，可攔截指定 client 所發(fā)起的所有請求 二. 用途 目前 PWA（Progress Web App） 的概念很火，大致就是讓 web 也跟 app...
閱讀 960·2021-11-23 09:51
閱讀 1205·2021-11-15 17:57
閱讀 1719·2021-09-22 15:24
閱讀 866·2021-09-07 09:59
閱讀 2299·2019-08-29 15:10
閱讀 1907·2019-08-29 12:47
閱讀 819·2019-08-29 12:30
閱讀 3457·2019-08-26 13:51
