【JS 】下載 彈框被攔截解決方案

最新解決方案:
新打開頁面, 在設置地址, 這樣就不存在問題

var newTab = window.open('about:blank')
newTab.location.href = url;

Paste_Image.png

總結[方法還是存在問題]

  1. 早期下載的簡單用法 : window.open(downloadUrl)
  2. 下載彈框會被攔截, 解決方案是使用 form 來實現
//Jquery 版, 多次下載防止,添加多個 form
if ($('#_downloadWin').length > 0) {       
      $('#_downloadWin').attr('action', url);  
      $('#_downloadWin input').val(path);} 
else {  
      // 傳參 則在 form 里面 添加 隱藏域(<input type="hidden"/>)
      $('body').append($(`<form id="_downloadWin" action="${url}" target="_blank" method="get"><input name="path"  type="hidden" value="${path}" /></form>`));
}
$('#_downloadWin').submit();
//JavaScript版
var f = document.createElement("form");
document.body.appendChild(f);
var i = document.createElement("input");
i.type = "hidden";
f.appendChild(i);
i.value = "5";
i.name = "price";
f.action = "aa.asp";  //下載的url 地址
f.submit();

問題描述與解決方案

早期下載文件的時候,是直接使用 window.open(downloadUrl) 這種簡單粗暴的方法來實現的.

但是到目前(2016.05.17), window.open 已經被大部分的主流瀏覽器給攔截了, 如下圖, 需要人工在點擊一次允許打開鏈接. 這樣大大的降低了 友好的交互.

Paste_Image.png

于是需要尋找新的解決方案, 就使用 form 表單元素來進行下載, 注意 Form 表單的 target 要設置為 _blank 在新的窗口打開,這樣就不會影響本頁面*

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 事件源對象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 910評論 0 0
  • 第一部分 準入訓練 第1章 進入忍者世界 js開發人員通常使用js庫來實現通用和可重用的功能。這些庫需要簡單易用,...
    如201608閱讀 1,374評論 1 2
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,767評論 18 399
  • 9.19--9.23 第7章 正則表達式 正則表達式是一個拆分字符串并查詢相關信息的過程。 推薦練習網站: js ...
    如201608閱讀 1,071評論 0 4
  • “朝朝暮暮讓你猜想如何馴服我”一言點破了情感關系中的一個法則:保持新鮮感。倘若一個男人若是看懂了一個女人,那么這個...
    小師hd閱讀 393評論 0 0