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

【问题标题】：Using Javascript to initiate onClick() events for multiple buttons on a page使用 Javascript 为页面上的多个按钮启动 onClick() 事件
【发布时间】：2020-12-19 19:06:05
【问题描述】：

我找到了几篇关于类似主题的文章，但不幸的是，解决方案不起作用。如果那是我的错误，请原谅我。

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

我尝试使用 Google Chrome 中的控制台编写脚本来执行此操作。

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

id="mainForm:documentList:0:j_id_4d"
id="mainForm:documentList:1:j_id_4d"
id="mainForm:documentList: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 下载事件（比如当 i 为 2 时）并且该 pdf 将下载。

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

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

Network errors

一些文章指出需要实现事件委托或侦听，我尝试过但也没有成功。我不再是编程人员，而是高级用户。非常感谢任何见解。

提前非常感谢您！斯蒂芬

【问题讨论】：

你有一个额外的 } .. 也可以尝试 buttons.forEach(button => { button.click(); }); 单行而不是 for 循环
感谢@astigmatik 的建议。我改变了它，但它仍然只下载一个文件。嗯。想法？
哦.. 是 _self 在 window.open() 中破坏了它.. 我认为您必须为每个按钮更改它
@astigmatik 当我进入并删除了一些按钮上的 window.open() 中的 _self 条目时，文件下载在我运行脚本后对这些按钮起作用。你是个天才。问题是这不是我的页面，我需要手动执行数百次才能获取所有文件 LOL。我想知道是否可以在每次调用的 foreach 循环中删除“_self”？
@astigmatik 好的，我只是首先在控制台中使用搜索和替换：``` document.body.innerHTML = document.body.innerHTML.replace(/_self/g, " ") ``` 删除 _self 然后运行你的建议，它就可以工作了。你太棒了。谢谢！

标签： javascript html events download iteration

【解决方案1】：

问题是按钮的 window.open() 中的“_self”。

当我删除所有对 _self 的引用时，文件下载完美。

谢谢散光！

【讨论】：

【解决方案2】：

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

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

并使用 forEach()

遍历它们

然后为列表中的每个项目调用click

最终代码是这样的：

var buttons=document.querySelectorAll('[id^="mainForm:documentList:"][id$=":j_id_4d"]');
    
buttons.forEach(function(button){
    console.log(button);
    button.click();
});

【讨论】：

感谢您的建议。它仍然只下载 1 个文件。我在上面添加了一些关于取消其他文件下载的额外 cmets。有人建议 window.open 上的 _self 是问题所在。感谢您的帮助。
是的，每个按钮都应该打开一个单独的选项卡或窗口。不要使用 _self。

【解决方案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) 中的设置更改为允许弹出窗口，那么一切都会按预期进行。

你可能想尝试一下

【讨论】：