使用Javascript为页面上的多个按钮启动onClick()事件

Question

我发现了一些关于类似主题的文章，但不幸的是，解决方案没有起作用。如果那是我的错误，请原谅我。

背景我有一个客户，他正在从一个基于web的pdf文档库提供商迁移到另一个。除了我们进入并点击每个文档的下载外，当前提供商没有办法导出他们的所有文档。页面上有一个所有文档的列表，每个文档旁边都有下载按钮。

我试着使用谷歌Chrome中的控制台来编写一个脚本。

代码所有下载按钮都有类似的id名称结构，如下所示，其中数字递增：

id＝"；mainForm:documentList:0:j_id_4d">
id="main表单：文档列表：1:j_id_4d">
id="main表单：文档列表：2:j_id_4d">

下面是一个示例按钮：

<button id="mainForm:documentList:0:j_id_4d" name="mainForm:documentList:0:j_id_4d" type="button" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="window.open('api/internal/documents/619c342f-e006-423e-b45b-43db822bd193','_self')" role="button" aria-disabled="false"><span class="ui-button-text ui-c">Download</span></button>

我写这段代码是为了找到所有与此匹配的按钮：

var buttons = document.querySelectorAll('[id$="_id_4d"]');

我可以看到按钮中填充了所有正确的按钮。

当我用这个循环遍历所有按钮以启动onclick事件时，只有第一个onclick活动启动下载。为了调试，我还在for循环中添加了一个if条件，以测试特定索引是否会启动它的onclick下载事件(比如当我为2时(，以及pdf是否会下载。

for (var i = 0; i < buttons.length; i++) {
       buttons[i].click();
}

我还可以在网络控制台中看到，第一个文件显示状态为200，其他文件显示取消。

网络错误

有些文章指出需要实现事件委派或监听，我尝试过，但也没有成功。比起编程，我更像是一个超级用户。任何真知灼见都将不胜感激。

提前感谢您！Stephan

Answer 1

问题是&quot_自我；在按钮的window.open((中。

当我删除所有对self的引用时，文件下载得很好。

谢谢你！

Answer 2

您可以使用以下选择器获取所有按钮：

var buttons=document.querySelectorAll('[id^="mainForm:documentList:"][id$=":j_id_4d"]');

并使用forEach()循环通过它们

然后点击列表中的每个项目

最终代码是这样的：

var buttons=document.querySelectorAll('[id^="mainForm:documentList:"][id$=":j_id_4d"]');

buttons.forEach(function(button){
console.log(button);
button.click();
});

Answer 3

这只是猜测。window.open()通常在非用户操作时被阻止，因为浏览器可能认为这是某种弹出式骗局。我在浏览器中尝试了这个简单的程序：

<button onclick="clicked()">click me</button>
<button onclick="clicked()">click me</button>
<button onclick="clicked()">click me</button>
<button onclick="clicked()">click me</button>
<button onclick="clicked()">click me</button>
<button onclick="clicked()">click me</button>

<script>
function clicked() {
window.open('https://google.com', '_blank')
}
const buttons = document.querySelectorAll('button'); 
buttons.forEach(button => button.click())
</script>

而且它不会正常工作。然而，如果我更改了浏览器(chrome(中的设置以允许弹出窗口，那么一切都如预期。

你可能想试试