为啥 button.click() 在我的脚本中不起作用？

Posted 2023-03-05

【中文标题】为啥 button.click() 在我的脚本中不起作用？

【英文标题】：Why button.click() is not working in my script?为什么 button.click() 在我的脚本中不起作用？

【发布时间】：2022-01-17 07:44:21

【问题描述】：

我有一个 javascript 脚本，它在部分代码中创建一个“虚拟按钮”并自动按下它。

此按钮不在 html 页面中，仅用于存储在脚本的某个点必须单击的链接。代码如下：

var virtualButton = document.createElement("button");
var linkText = document.createTextNode("assign to relevant user");
virtualButton.appendChild(linkText);
virtualButton.title = "assign to relevant user";
virtualButton.href = link;
document.body.appendChild(virtualButton);

virtualButton.click();

对我来说一切都很好，但代码实际上并没有点击按钮。

我错过了什么吗？

【问题讨论】：

这能回答你的问题吗？ How to create an HTML button that acts like a link

点击这个<button>时你期望会发生什么？

你怎么知道点击没有被触发？ “按钮”上的“href”不是链接。默认情况下，按钮具有一组“类型”，具体取决于它是否在表单中，否则没有默认“行为”。我看不到你在哪里听点击实际做某事。这种感觉就像你想要的window.location.href="someurl"

但是所有代码都可以是一行：window.location.href=link; 做同样的事情

您可以向任何 URL 发送请求，而无需创建 DOM 元素并以编程方式单击它。此外，您可以选择使用 Promise 根据您正在调用的端点返回的结果运行代码。阅读XMLHttpRequest 或FetchAPI 可以用于您的目的。

【参考方案1】：

<button/> elements 没有.href 属性。您很可能希望使用anchor (<a/>) element。见下文：

var virtualButton = document.createElement("a");
var linkText = document.createTextNode("assign to relevant user");
virtualButton.appendChild(linkText);
virtualButton.title = "assign to relevant user";
virtualButton.href = "https://www.google.com";
document.body.appendChild(virtualButton);

virtualButton.click();

（它实际上不会导航，因为它位于沙盒 <iframe/> 中，但您会看到它尝试这样做）。

【讨论】：

为什么？为什么不只是window.location.href="https://www.google.com" 它只是去那里？

@MarkSchultheiss - 你没有错。我天真地假设用户试图向 DOM 添加一个锚点并单击它是有一个令人信服的原因，但你肯定是正确的，我已经成为回答 XY 问题的受害者。如果用户可以提供更多关于为什么他们这样做的上下文，我们很可能会发现整个方法完全过度设计或不正确。