本篇文章更新時間：2019/02/16
如有資訊過時或語誤之處，歡迎使用 Contact 功能通知。
一介資男的 LINE 社群開站囉！歡迎入群聊聊～
如果本站內容對你有幫助，歡迎使用 BFX Pay 加密貨幣 或 新台幣 贊助支持。
下載是網站中常見的操作，但操作體驗基本款為「開啟一個新頁面，然後開始下載」，而前端工程為了帶來更好的體驗效果當然不能這樣把一個操作流程帶往到新頁面後這邊就結束，所以掌握好操作動向的 UX 設計在這部分就會有一些挑戰。
有些時候你想要PDF與一些圖檔是使用下載方式操作，但卻觸發瀏覽器去嘗試讀取，也可能是個需要被修正的問題，但這種情境就不是JavaScript能解決的了，需要透過後端傳送 HTTP Header 來讓瀏覽器執行對應動作
HTML5 中 a 元素有個屬性「download」 能夠好棒棒的讓這件事情發生，但很可惜，瀏覽器支援度實在不盡滿意，面對萬惡IE也要到13版後才支援，而且下一個萬惡： Safari 還目前都不支援。
後面要介紹的 JavaScript 控制下載檔案事件，是假設後端已經針對任何類型檔案都已經處理好送出 force-download 的 header （才不會發生：雖要下載，但瀏覽器又吃這檔案改為讀取 的問題）
操作體驗上既然要避免因為點擊 a 元素而另開新頁觸發下載，所以改成使用按鈕（也可以阻止錨點定位亂跑），而綁定的事件就是 click ，點擊後動態產生新的 HTML iframe 元素去「瀏覽」（使用 src 的屬性掛載下載連結）就可以完成當前頁面下載的控制。
簡單範例如下：
var iframe = document.createElement('iframe');
iframe.setAttribute('src', download_path);
document.body.appendChild(iframe);
至於如果下載後還有其特別需要（後端傳入）顯示的資料或是狀態的捕捉還可以利用JSONP的方式來前後端合作！ 可以參考這篇 Retrieving HTTP status code from loaded iframe with Javascript 的做法。
相對於另開視窗（window.open）或是直接當前頁面跳轉（location.href）的操作，還是iframe的做法俐落乾淨！比較推薦～
iframe 的玩法還有另一個： 不跳轉頁面，模擬 AJAX 傳送值給後端 ，這種做法對於跨瀏覽器的支援也滿好的！