使用jQuery或Javascript觸發HTML5下載

Question

我希望HTML代碼上的buttong可以下載在按下時正在下載錨點的圖像。

 $('.foo').on('click', function() { $('a').trigger('click'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button> 

Answer 1

您需要調用click dom元素。

 $('.foo').on('click', function() { $('a')[0].click(); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button> 

Answer 2

在觸發事件處理程序中也有詳細記錄 ：

jQuery的事件處理系統是本機瀏覽器事件之上的一層。 使用.on（“ click”，function（）{...}）添加事件處理程序時，可以使用jQuery的.trigger（“ click”）觸發事件處理程序，因為jQuery在最初添加該處理程序時會存儲對該處理程序的引用。 此外，它將觸發onclick屬性內的JavaScript。 .trigger（）函數不能用於模仿本機瀏覽器事件，例如單擊文件輸入框或錨標記。 這是因為，沒有使用與這些事件相對應的jQuery事件系統附加事件處理程序。

由此：

如果不是.trigger（），我如何模仿本機瀏覽器事件？ 為了觸發本機瀏覽器事件，必須對<IE9使用document.createEventObject，對於所有其他瀏覽器都必須使用document.createEvent。 使用這兩個API，您可以以編程方式創建一個事件，其行為就像某人實際上單擊了文件輸入框一樣。 將執行默認操作，並顯示瀏覽文件對話框。

jQuery UI團隊創建了jquery.simulate.js，以簡化觸發本地瀏覽器事件以用於其自動化測試的過程。 它的用法是在jQuery觸發之后建模的。

這個jQuery項目不再活躍，但是無論如何，它非常有趣。

因此：

 $(function () { $('.foo').on('click', function() { $('a').simulate('click'); }) }); 

 <script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> <script src="https://cdn.rawgit.com/jquery/jquery-simulate/master/jquery.simulate.js"></script> <a href="//www.gravatar.com/avatar/b6640a9a125eb5cf2bc47ddc17b8ee7a?s=328&d=identicon&r=PG" download>Click here to download image</a> <button class="foo"> I expected this button to download also de image </button>