我正在尝试以编程方式单击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>