如何以編程方式單擊按鈕 - 也許是 Angular？

Question

我正在嘗試以編程方式單擊 html 按鈕。

查看頁面源 - 我明白了

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

我不認為這是標准的 html - 也許是擴展。

我可以到達按鈕 object - 但調用obj.click()不起作用。

該文檔也有這個 header - 也許可以識別文檔類型 - 還有很多 class 名稱以ng-前綴開頭。

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

更多信息...這是第三方網頁，我將 javascript 注入其中。

我在 INPUT 字段中輸入了一些內容，然后想模擬按鈕按下。

純 javascript。

Answer 1

在 Stackblitz 中創建了一個示例演示以供參考

在 Angular 中，我們可以使用@ViewChild和ElementRef訪問任何 HTML 元素。 我們還必須通過在要以編程方式訪問的 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();
}

Answer 2

JavaScript 選項

如果您想使用純 JavaScript 執行此操作，您可以向按鈕添加一個 ID 並執行以下操作：

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

jQuery 選項

如果我用 jQuery 來做這件事，我會寫這段代碼：

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

現在的問題是，如果您的頁面上有多個 forms ，它將單擊使用$('.submitBtns button').click(); 選擇器。 如果您有權訪問代碼，您可能會向此按鈕添加一個 ID。 只需將其更改為：

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

如果您需要模擬單擊以觸發與單擊相關的事件，但實際上並未單擊按鈕，則可以使用$("#myButton").trigger("click"); .

Answer 3

我假設您熟悉的唯一 JavaScript 是您從瀏覽器擴展源中閱讀的內容。 您忽略了一些基本步驟。 此外，您提到的可能性至少可以說是分散的：

我不認為這是標准的 html ...

這是非常標准和有效的，完美無瑕的 HTML。

我可以到達按鈕 object - 但調用 obj.click() 不起作用...

obj是如何從obj.click()獲得的還不是很清楚。

還有其他零散的信息片段...... ng-*類是 Angular - 你是對的。 <meta>與手頭的問題無關。

更多信息...這是一個第三方網頁，我將 JavaScript 注入其中。 我在 INPUT 字段中輸入了一些內容，然后想模擬按鈕按下。

這通常是不可能的，除非您對所述第三方站點具有編輯權限。 我相信瀏覽器擴展可以做到這一點，但它實際上並沒有編輯網站本身，它只是瀏覽器為用戶呈現的內容。

---

演示

注意：細節在demo中有注釋——另外，我加載了一個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>