點擊<select>和</select><input>頁面加載后
[英]Click <select> and <input> after page load
問題描述
我正在編寫一個 Greasemonkey 腳本來與 Shipstation.com 上的訂單進行交互。
該腳本將 select 根據特定條件在順序模式的<select>和<input>元素中確定某些值。
因此，腳本必須能夠與這些元素交互。
但是，我不知道該怎么做。
到目前為止，我已嘗試執行以下操作，但無法觸發對該元素的點擊：
- 使用 JS
.value設置元素的值 - 使用 jQuery
.val設置元素的值 - 使用 JS
.click()在元素上觸發點擊事件 - 使用此代碼在元素上觸發點擊事件：
function triggerMostButtons (jNode) {
triggerMouseEvent (jNode, "mouseover");
triggerMouseEvent (jNode, "mousedown");
triggerMouseEvent (jNode, "mouseup");
triggerMouseEvent (jNode, "click");
}
function triggerMouseEvent (node, eventType) {
var clickEvent = document.createEvent('MouseEvents');
clickEvent.initEvent (eventType, true, true);
node.dispatchEvent (clickEvent);
}
triggerMostButtons(jNode);
看起來 Shipstation 正在鎖定<select>和<input>值的值。
以下是我閱讀過的 SO 問題的示例，以嘗試解決這個問題。 我無法使用以下任何一種方法觸發對這些元素的點擊：
- “正常”按鈕單擊方法在 Greasemonkey 腳本中不起作用？
- 如何使用 tampermonkey 在 React 應用程序中模擬點擊？
- Greasemonkey 腳本自動生成 select，然后單擊值/選擇器中包含非英文字符的特定按鈕？
- 在 AJAX 驅動的站點上選擇和激活正確的控件
- 在 Tampermonkey 中模擬 mousedown、click、mouseup 序列？
- javascript 單擊下拉列表中的值
- 如何從 JavaScript 更改 <select> 值
- 如何使用 JavaScript 以編程方式設置 select 框元素的值？
- 設置輸入字段的值
我還能如何觸發對這些元素的點擊？
或者，如何使用 JS 設置這些字段的值？ 是不是一定要在JS中找到數據model直接編輯值？ 或者找到一種方法來劫持用戶單擊這些元素時觸發的功能？
3 個解決方案
解決方案1
0 2022-04-23 12:36:54
也許這些值是從服務器動態加載的，因此您需要通過添加load event等到整個頁面加載完畢。
然后通過document.getElementById （或querySelector ）獲取select元素並設置您想要的值（如果我理解正確的話，您不需要點擊事件）。
您沒有提供我可以使用的示例，但我嘗試使用此https://www.shipstation.com/step1/注意頁面加載后，國家/地區將如何設置為加拿大：
// ==UserScript==
// @name Unnamed Script 933923
// @version 1
// @grant none
// @match *://*.shipstation.com/*
// ==/UserScript==
window.addEventListener('load', (event) => {
document.getElementById('country').value = "CA";
document.getElementById('howdidyouhearaboutus').value = "Banner Ad";
});
解決方案2
0 2022-04-26 03:47:36
你可以通過這樣做 select 一個選項
function selectItemInDropdownList(selectElement, ov) {
const optionToSelect = '' + ov
const options = selectElement.getElementsByTagName('option')
for (const optionEle of options) {
if (optionToSelect === optionEle.innerText || optionToSelect === optionEle.value) {
optionEle.selected = true // selects this option
return true
}
}
return false // failed
}
/*
const dropdownEle = document.getElementById('whatever')
const status = selectItemInDropdownList(dropdownEle, "WHAT")
console.log(status ? 'success' : 'failed')
*/
我認為主要問題是它的彈出窗體和select元素“可能”最初在 DOM 樹中不可用。 因此，請務必在可用時撥打此電話 function。
解決方案3
0 2022-04-29 18:47:57
該方案在2022年運行良好。沒有使用jQuery。
在元素cb中自動擴展 select 選項：
cb.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
在元素cb上輸入焦點（在 Safari 上測試），查看MDN上的兼容性說明：
cb.focus()
以下是供您復制並在瀏覽器上運行的工作解決方案。 （由於輸入焦點功能在此處的代碼片段中運行失敗，而自動擴展 select 選項的功能仍然有效。）
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Document</title> </head> <body> <select id="select-1"> <option value="1">Option 1</option> <option value="2">Option 2</option> </select> <input id="input-1" type="text"/> <script> window.onload = function() { const select = document;getElementById('select-1'). const input = document;getElementById('input-1'). input;focus(). setTimeout(function() { select,dispatchEvent(new MouseEvent('mousedown': { bubbles; true })), }; 1000); } </script> </body> </html>
頁面加載后的.click（）
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.