国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

怎么去控制瀏覽器對(duì)資源文件的處理行為

UsherChen / 3559人閱讀

摘要：瀏覽器是怎么處理文件鏈接的通常當(dāng)用戶打開一個(gè)資源的如果瀏覽器支持這個(gè)格式的文件的情況下，瀏覽器會(huì)嘗試去再頁面里展示它而不是直接下載。

瀏覽器是怎么處理文件鏈接的

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

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

強(qiáng)制下載文件

對(duì)于瀏覽器這種行為，一般情況下是可以接受的，因?yàn)橛脩艨梢栽跒g覽器顯示文件后將文件保存到電腦中，但是一些情況下用戶可能希望文件直接被下載而不是在瀏覽器中被打開，比如有時(shí)候用戶想去下載一個(gè)歌曲，但是瀏覽器可能回去播放該音頻。那么怎么讓瀏覽器強(qiáng)制去下載文件要怎么做呢

a標(biāo)簽的download屬性

html5中 a 標(biāo)簽新增了 download 屬性，該屬性指示瀏覽器下載url的內(nèi)容而不是導(dǎo)航到url，因此如果配置了此屬性用戶會(huì)直接下載url的內(nèi)容。作為開發(fā)如果想直接觸發(fā)該事件我們可以直接用代碼模擬a標(biāo)簽和點(diǎn)擊事件

    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屬性只在同域時(shí)候有效，當(dāng)跨域請(qǐng)求時(shí)候該屬性將會(huì)被忽略。


當(dāng)前并非所以瀏覽器都支持該屬性，需要瀏覽器考慮兼容性。
改變資源格式

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

配置Content-Disposition

在HTTP場(chǎng)景中，Content-Disposition 消息頭指示回復(fù)的內(nèi)容該以何種形式展示，是以內(nèi)聯(lián)的形式（即網(wǎng)頁或者頁面的一部分），還是以附件的形式下載并保存到本地。


inline 默認(rèn)參數(shù)表示消息體會(huì)以頁面的一部分或者整個(gè)頁面的形式展示。



attachment 消息體應(yīng)該被下載到本地，將參數(shù)filename的值預(yù)填為下載后的文件名

因此當(dāng)我們希望該資源被直接下載時(shí)候，我們可以設(shè)置返回頭Content-Disposition的值為attachment。

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

這里設(shè)置名稱時(shí)候，要注意下filename的編碼格式。

用戶自己在瀏覽器設(shè)置

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

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/95818.html

相關(guān)文章

  • HTTP 緩存的關(guān)鍵路徑

    摘要：其關(guān)鍵路徑如下圖所示圖緩存關(guān)鍵路徑三關(guān)鍵路徑之驗(yàn)證緩存瀏覽器發(fā)起一個(gè)請(qǐng)求，生成報(bào)文，先發(fā)送到緩存器，緩存器驗(yàn)證是否有本地緩存，緩存是否過期等，即圖的第一條路徑，稱之為驗(yàn)證緩存。 一、證件照?qǐng)鼍?拍一次證件照麻煩且費(fèi)錢，因此每次拍的時(shí)候我們都會(huì)多留幾張備用。這就是計(jì)算機(jī)世界的緩存，在現(xiàn)實(shí)世界中的寫照。 如果某個(gè)行為很消耗資源，很麻煩，那在實(shí)現(xiàn)它的時(shí)候就順便多保留幾份，這種行為就是緩存。特...

    Anleb 評(píng)論0 收藏0

  • 譯文-瀏覽器下載圖片的方式和時(shí)間點(diǎn)

    摘要：接下來看看瀏覽器是怎么處理預(yù)測(cè)瀏覽器行為瀏覽器下載圖片應(yīng)該獨(dú)立于的構(gòu)建。那么相應(yīng)的瀏覽器就會(huì)下載不可見的。因?yàn)槿绻麨g覽器在構(gòu)建前開始下載，它是沒有辦法知道這張圖片是不是需要展示在頁面上。 原文鏈接：https://csswizardry.com/2018/... 背景資料 為了更好地控制產(chǎn)品主頁縮略圖的顯示，（作者）團(tuán)隊(duì)選擇了css的background-image而不是標(biāo)簽上能解決這...

    miguel.jiang 評(píng)論0 收藏0

  • serviceWorker 入門

    前提 本文涉及幾個(gè)知識(shí)點(diǎn)：fetch、caches、indexDB 等都不會(huì)詳細(xì)介紹，僅對(duì)于其中某些點(diǎn)帶過 一. 概念 serviceWorker，服務(wù)工作線程，顧名思義，只是作為工作線程存在，不摻和到JS主線程中來，介于 瀏覽器 & 服務(wù)器中間層，可攔截指定 client 所發(fā)起的所有請(qǐng)求 二. 用途 目前 PWA（Progress Web App） 的概念很火，大致就是讓 web 也跟 app...

    lemanli 評(píng)論0 收藏0

  • 緩存詳解

    摘要：瀏覽器的緩存策略緩存的目標(biāo)一個(gè)檢索請(qǐng)求的成功響應(yīng)對(duì)于請(qǐng)求，響應(yīng)狀態(tài)碼為，則表示為成功。 前言 總括： 緩存從來都是前端的一個(gè)痛點(diǎn)，很多前端搞不清楚緩存到底是何物，從而給自己創(chuàng)造了一些麻煩，本文一如既往的用通俗易懂的文字和實(shí)例來講述緩存，希望能讓您有所得。 原文博客地址： 緩存詳解 知乎專欄&&簡(jiǎn)書專題：前端進(jìn)擊者（知乎） 博主博客地址：Damonare的個(gè)人博客 天青色等煙雨...

    JellyBool 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<