javascript - 如何处理 HTMLElement.Click() 静默失败

Question

我使用类似于 this answer 的代码通过 ajax 实现了一个文件下载按钮。 .我的代码看起来像这样:

$('#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，创建一个 <a>具有对象 URL 的 Href 并调用 Click() 的元素在该元素上下载文件。某些浏览器会在此时抛出错误，因此作为回退，我们捕获错误并显示创建的按钮，以便用户可以按下并获取文件。

问题是某些浏览器(似乎是在 iOS 和旧版本的 Android 上)会简单地忽略 Click()称呼。我知道我可以使用浏览器嗅探来处理这个问题，但我认为这不是一个很好的解决方案。有什么更优雅的方法可以让我检测到这种情况并使用我的后备方法吗？

Answer 1

您可以创建一个标志来检查您的脚本是否能够触发点击事件。监听点击并翻转标志，一段时间后处理未检测到点击的情况。

        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);

另一种解决方案是始终显示链接，但让链接文本类似于“如果您的下载未开始，请单击此处”