如何解决使用 Javascript 为页面上的多个按钮启动 onClick() 事件
我找到了几篇关于类似主题的文章,但不幸的是这些解决方案没有奏效。如果这是我的错误,请原谅我。
背景 我有一个客户正在从一个基于 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 下载事件(比如当我是 2 时)并且该 pdf 将下载。
for (var i = 0; i < buttons.length; i++) {
buttons[i].click();
}
我还可以在网络控制台中看到第一个文件显示状态为 200,而其他文件显示已取消。
有些文章指出需要实现事件委托或监听,我尝试过但也没有奏效。我更像是一个高级用户而不是编程了。非常感谢任何见解。
在此先感谢您! 斯蒂芬
解决方法
问题在于按钮的 window.open() 中的“_self”。
当我删除所有对 _self 的引用时,文件下载得很好。
谢谢散光!
,您可以使用此选择器获取所有按钮:
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();
});
,
这只是猜测。当 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) 中的设置更改为允许弹出窗口,那么一切都会按预期进行。
你可能想试一试
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。