如何以编程方式点击按钮——也许是Angular



我正在尝试以编程方式单击html按钮。

查看页面来源-我看到

<div class="submitBtns">
<button class="btn btn-primary primaryBtn" type="button">Search</button>
</div>

我不认为这是标准的html——也许是一个扩展。

我可以访问按钮对象,但在上面调用obj.click()不起作用。

文档也有这个头——也许它可以识别文档类型——还有很多以ng-前缀开头的类名。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

更多信息。。。这是一个第三方网页,我正在为它注入javascript。

我在INPUT字段中输入了一些内容,然后想模拟按下按钮。

纯javascript。

在Stacklitz中创建了一个示例演示以供参考

在Angular中,我们可以使用@ViewChild&ElementRef。我们还必须通过在要以编程方式访问的HTML元素中前缀#来添加一个唯一标识符。

在HTML中:

<button class="btn btn-primary primaryBtn" #search type="button">Search</button>

在TS中:

import { Component, ViewChild, ElementRef } from '@angular/core';
.
.
export class YourComponent{
.
.
@ViewChild('search') search: ElementRef;
.
.
.
.   // In your function
this.subContent.nativeElement.click();
}

JavaScript选项

如果你想用纯JavaScript来做这件事,你可以在按钮上添加一个ID,然后这样做:

document.getElementById("myButton").click();

jQuery选项

如果我用jQuery做这件事,我会写下这段代码:

<script>
$(document).ready(function() {
$('.submitBtns button').click();
});
</script>

现在的问题是,如果您的页面上有多个表单,它会单击使用$('.submitBtns button').click();选择器标识的所有按钮。如果你有权访问代码,你可能会向这个按钮添加一个ID。只需将其更改为:

<script>
$(document).ready(function() {
$('#myButton').click();
});
</script>

如果您需要模拟点击以触发与点击相关的事件,但实际上并没有点击按钮,则可以使用$("#myButton").trigger("click");

我假设您唯一熟悉的JavaScript是从浏览器扩展源代码中读取的内容。你忽略了几个基本步骤。此外,至少可以说,你提到的可能性是分散的:

我不认为这是标准的html

它是非常标准、有效、完美的HTML。

我可以访问按钮对象,但对其调用obj.click((不起作用

obj是如何从obj.click()中获得的还不太清楚。

还有其他零散的信息片段。。。ng-*类是Angular类——你是对的。<meta>与当前问题无关。

更多信息。。。这是一个第三方网页,我正在为它注入JavaScript。我在INPUT字段中输入了一些内容,然后想模拟按下按钮

除非您对所述第三方网站具有编辑权限,否则这通常是不可能的。我相信浏览器扩展可以做到这一点,但它实际上并没有编辑网站本身——这只是浏览器为用户呈现的内容。


演示

注意:细节在演示中有评论——此外,我加载了一个Bootstrap 4,因为我很无聊。Bootstrap当然不是必需的,而且完全是可选的。

// Reference the button
const btn = document.querySelector('.searchButton');
/*
- Register the click event to button
- When clicked the handler function flipStatus() is called
*/
btn.onclick = flipStatus;
/*
- Event handler function passes the event object
- event.target always references the elements that the user
clicked.
- .classList.toggle('active') will add class .active if the
button doesn't have it and remove class .active if the
button has the class .active
*/
function flipStatus(event) {
event.target.classList.toggle('active');
}
/*
- Programatically click the button -- if successful, the 
button text should be: "Searching..."
- If clicked by user afterwards the button text should be:  
"Search"
*/
btn.click();
.input-group.input-group {
width: 85vw;
margin: 15px auto;
}
.active.active::after {
content: 'ing...';
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.13.0/css/all.css" rel="stylesheet" crossorigin="anonymous">
<section class="input-group input-group-lg">
<input class="searchTerms form-control" type="search" placeholder="Enter search terms...">
<section class="input-group-append">
<button class="searchButton btn btn-lg btn-primary" type="submit">Search</button>
</section>
</section>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

最新更新