[英]JavaScript click() method only works once in Chrome extension
我正在尝试在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%确定我正确实现了这个(如果人们认为这种方法应该解决它,可以稍后发布代码)
很惊讶为什么简单地保存多个文件是如此困难。 感谢任何帮助。
诀窍不是使用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
。 您可以调整超时以关闭选项卡,但是,如果您关闭它太快,则不会发生下载。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.