如何處理HTMLElement.Click（）靜默失敗

我已經使用類似於this answer的代碼通過ajax實現了文件下載按鈕。我有一些代碼看起來是這樣的：如何處理HTMLElement.Click（）靜默失敗

$('#download-link').on('click', function (event) { 
    event.preventDefault(); 
    var link = $('#download-link').attr('href'); 
    $.ajax({ 
     url: link, 
     success: function (result) { 

      var blob = getBlob(result); 
      var a = document.createElement('a'); 
      var url = (window.URL ? URL : webkitURL).createObjectURL(blob); 
      a.href = url; 
      a.download = 'somefilename.txt'; 
      a.style.display = 'none'; 
      document.body.appendChild(a);      
      try { 
       a.click(); 
      } 
      catch (err) { 
       //fallback. if .click() is unavailable display a new button for user to get file. 
       a.style.display = ''; 
       a.innerText = 'Get File'; 
       var downloadButton = document.getElementById('download-link'); 
       downloadButton.style.display = 'none'; 
      } 
     } 
    }); 
});

所以基本上，我們創建一個URL對象，與對象URL的HREF創建<a>元素和元素上調用Click()下載該文件。有些瀏覽器會在那個時候拋出一個錯誤，所以作爲回退，我們會捕獲錯誤並顯示創建的按鈕，以便用戶可以按下並獲取文件。

問題是，一些瀏覽器（似乎在iOS和Android的舊版本）將簡單地忽略Click()調用。我知道我可能使用瀏覽器嗅探來處理這個，但我不認爲這是一個很好的解決方案。有什麼更優雅的，我可以做，以檢測這種情況，並使用我的後備？

來源

2017-09-01 Slappywag

哪些錯誤與一個普通的女主播？ –

我認爲常見的用戶體驗模式是讓你的鏈接文本類似於「如果你的下載不開始點擊這裏」，而不是隱藏它 –

你需要ajax嗎？（$''＃download-link'）。attr（'download'，'somefilename.txt'）'可能根本不需要任何js – Endless

您可以創建一個標記來檢查您的腳本是否能夠觸發單擊事件。聆聽點擊並翻轉標誌，並在一段時間後處理未檢測到點擊的情況。

 a.href = url; 
     a.download = 'somefilename.txt'; 
     a.style.display = 'none'; 
     var linkClicked = false; 
     a.addEventListener('click',()=>linkClicked = true); 
     document.body.appendChild(a);      
     a.click(); 
     setTimeout(()=>{ 
      if(!linkClicked){ 
      //fallback. if .click() is unavailable display a new button for user to get file. 
      a.style.display = ''; 
      a.innerText = 'Get File'; 
      var downloadButton = document.getElementById('download-link'); 
      downloadButton.style.display = 'none'; 
      } 
     },500);

另一個解決方案是始終顯示的鏈接，但有沿線鏈接文本的東西「如果你不能下載請點擊這裏」

來源

2017-09-01 13:24:41

這絕對是我尋找的更優雅的解決方案，雖然我認爲始終顯示鏈接可能是最好的主意。謝謝 – Slappywag

@Professor奧爾曼已經通過檢測.click()提供了完美的解決方案功能，而不是嗅探瀏覽器。

讓用戶輕鬆代碼中使用，我想重構代碼，添加緩存，並把它包裝成一個單一的功能：

function hasClickFeature(callback) { 
    if (window.hasAnchorClickFeature !== undefined) { 
    callback(window.hasAnchorClickFeature); 
    } 

    var a = document.createElement('a'); 
    var hasClick = false; 
    a.href='javascript:;'; 
    a.style.display = 'none'; 
    a.addEventListener('click', function() { 
    hasClick = true; 
    window.hasAnchorClickFeature = hasClick; 
    callback(hasClick); 
    }); 
    document.body.appendChild(a); 
    a.click(); 
    setTimeout(function() { 
    if (!hasClick) { 
     window.hasAnchorClickFeature = hasClick; 
     callback(hasClick); 
    } 
    }, 500); 
} 

hasClickFeature(function(hasClick) { 
    console.log(hasClick); 
});

來源

2017-09-01 13:49:48 shaochuancs

如何處理HTMLElement.Click（）靜默失敗

回答

相關問題