JavaScript click（）方法僅在Chrome擴展程序中運行一次

Question

我正在嘗試在Chrome擴展程序中下載多個文件。 以下代碼創建指向文件的虛擬鏈接，然后觸發下載文件的.click（）事件。 問題是只有第一個.click（）事件才會觸發下載。 后續的.click（）事件將被忽略。

這里的manifest.json ：

{
  "name": "Simple File Downloader",
  "version": "0.1",
  "permissions": ["contextMenus", "http://*/"],
  "background": {
    "persistent": false,
    "scripts": ["sample.js"]
  },
  "content_security_policy": "script-src 'self'; object-src 'self'",
  "manifest_version": 2
}

這里是sample.js ：

function onClickHandler(info, tab) {
    var a = document.createElement('a');
    a.href = 'http://or.cdn.sstatic.net/chat/so.mp3';
    a.download = 'so.mp3';
    document.body.appendChild(a);
    a.click(); // this click triggers the download
    // this timeout violates content security policy
    // setTimeout(a, 300); 
    a.click(); // this click doesn't do anything
    document.body.removeChild(a);

    a = document.createElement('a');
    a.href = 'http://or.cdn.sstatic.net/chat/so.mp3';
    a.download = 'so.mp3'; 
    document.body.appendChild(a);
    a.click(); // this click doesn't do anything either
    document.body.removeChild(a);
};

chrome.contextMenus.onClicked.addListener(onClickHandler);
chrome.runtime.onInstalled.addListener(function() {
  chrome.contextMenus.create({"title": "Download File", "id":"download_file"});
});

我試過了：

下載文件的不同方法，如使用FileSaver.js在Chrome擴展程序寫入文件系統中所述，結果完全相同，第一個文件被下載，第二個文件沒有
添加超時如下所述是否有可能在javascript中進行兩次.click方法調用，導致內容安全策略違規，我試圖使用Google Chrome擴展程序制作中的Content-Security-Policy錯誤中描述的方法解決這個問題，但沒有成功
使用JQuery點擊事件中描述的jQuery .live方法只能工作一次，也沒有成功，但我並不是100％確定我正確實現了這個（如果人們認為這種方法應該解決它，可以稍后發布代碼）

很驚訝為什么簡單地保存多個文件是如此困難。 感謝任何幫助。

Answer 1

訣竅不是使用element.click方法而是創建多個MouseEvent 。 為此，您需要在每次需要單擊時創建一個MouseEvent 。

function clicker(el, clickCount) {
  var mousedownEvent;
  while(clickCount--) {
    mousedownEvent = document.createEvent("MouseEvent");
    mousedownEvent.initMouseEvent("click", true, true, window, 0, null, null, null, null, false , false, false, false, 0, null);
    el.dispatchEvent(mousedownEvent);
  }
}

clicker(a, 3);
// your anchor 'a' gets clicked on 3 times.

但是，在Chrome中使用此方法時，您會收到來自瀏覽器的警告，詢問“此網站正在嘗試下載多個文件。您要允許這樣做嗎？[拒絕] [允許]” 。 因此，如果您在擴展程序的后台頁面中執行此操作，則后台頁面會收到警告，用戶無法看到它，因此用戶無法單擊“允許”。

（粗略/討厭）解決方法是創建一個“點擊”錨點的選項卡。 像這樣的東西：

function _anchorDownloader(url, filename) {
  var timeout = 500;
  return 'javascript:\'<!doctype html><html>'+
    '<head></head>' +
    '<script>' +
      'function initDownload() {'+
        'var el = document.getElementById("anchor");'+
        'el.click();' +
        'setTimeout(function() { window.close(); }, ' + timeout + ');' +
      '}'+
    '</script>' +
    '<body onload="initDownload()">' +
      '<a id="anchor" href="' + url + '" download="'+ filename + '"></a>'+
    '</body>' +
    '</html>\'';
};

function downloadResource(info, tab) {
  // ...
  chrome.tabs.create( { 'url' : _anchorDownloader( url, filename ), 'active' : false  } );
  // ...
}

chrome.contextMenus.create({"title": "Save Image…", "contexts":["image"], "onclick": downloadResource });

為此，擴展必須將"tabs"作為manifest.json中的permission 。 您可以調整超時以關閉選項卡，但是，如果您關閉它太快，則不會發生下載。

Answer 2

而不是使用不再推薦的.live()方法，嘗試.on()

$(document).on("click", "a", function( event ){
    // do whatever
});

這是文檔

JavaScript click（）方法僅在Chrome擴展程序中運行一次

問題描述

2 個解決方案

解決方案1
5 2013-03-13 16:05:20

解決方案2
0 2012-12-25 21:03:28

JavaScript click（）方法僅在Chrome擴展程序中運行一次

問題描述

2 個解決方案

解決方案1 5 2013-03-13 16:05:20

解決方案2 0 2012-12-25 21:03:28

解決方案1
5 2013-03-13 16:05:20

解決方案2
0 2012-12-25 21:03:28