How to use js to get the pop-up box btn button from the following code and automatically click OK in Oil Monkey

Yuxian: CSDN content partner, CSDN rising star mentor, 51CTO (Top celebrity + expert blogger), github open source enthusiast (go-zero source code secondary development, game back-end architecture https://github.com/Peakchen)

To get the button of the popup box from code using JavaScript and automatically click the OK button in Grease Monkey script, you can use the following steps:

Detect pop-up boxes : Use JavaScript alertor functions to trigger pop-up boxes. These functions display a popup containing a button in the browser.confirmprompt
Capture the pop-up box : Use windowthe object's onbeforeunloadevents or window.addEventListenerfunctions to capture the pop-up box. When the pop-up box appears, onbeforeunloadthe event will be triggered, or it can be used window.addEventListenerto listen for beforeunloadthe event.
Automatic button click : In the event handler, use JavaScript to simulate clicking the button of the popup box. You can select button elements by using functions such document.querySelectoras or document.getElementByIdand clicktrigger the button's click event using methods.

The following is a sample code that demonstrates how to use JavaScript to get the button of the pop-up box and automatically click the OK button:

window.addEventListener('beforeunload', function(event) {
  // 检测到弹出框出现
  // 获取确定按钮元素
  var confirmButton = document.querySelector('.popup-button');

  // 模拟点击确定按钮
  confirmButton.click();

  // 可选：取消弹出框
  // event.preventDefault();
});

In the above code, beforeunloadthe event is monitored, and when the pop-up box appears, the event handler will be executed. In the event handler, click the OK button automatically by document.querySelectorselecting the element of the OK button and using clicka method to trigger the button's click event.

Principle explanation:

Pop-up boxes are usually implemented using browser native dialog boxes, such as alert, confirmor promptfunctions. These functions will display a popup box in the browser with button options such as OK and Cancel. Through JavaScript, you can capture the appearance of a pop-up box and simulate clicking a button to implement automated operations.

Usage scenario explanation:

The scenario of automatically clicking the pop-up box button usually occurs when automated processing or testing of web pages is required. For example, in web page automation testing, JavaScript can be used to automatically click the pop-up box button to test the interactive logic of the dialog box. Another scenario is user scripts (such as Grease Monkey Script) that can use JavaScript to automatically click popover buttons to handle prompts or confirmation dialog boxes on specific web pages.

To get the popover button from a given HTML code using JavaScript and automatically click the OK button in Greasemonkey script, you can follow these steps:

Inject JavaScript code in Grease Monkey Script to get and click the button. Make sure you have created a script in GreaseMonkey Script Manager for the site.

Use the document.querySelector() function to obtain the popup button element through a CSS selector. In this case, you can use the ".layui-layer-btn0" selector to select the element with the class name "layui-layer-btn0".

Use the HTMLElement.click() method to simulate click operations.

Here is sample code:

/ ==UserScript==
// @name         自动点击弹出框确定按钮
// @namespace    http://huaiyang.hnjichujiaoyu.com/
// @version      1.0
// @description  自动点击弹出框确定按钮
// @match        http://huaiyang.hnjichujiaoyu.com/*
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    // 等待弹出框加载完成
    setTimeout(function() {
        // 获取弹出框确定按钮元素
        var confirmButton = document.querySelector('.layui-layer-btn0');
 
        if (confirmButton) {
            // 模拟点击确定按钮
            confirmButton.click();
        }
    }, 3000); // 等待3秒后执行，可以根据需要调整等待时间
})();

Copy and paste the above code into your Grease Monkey script, and make sure the URL matched by the script matches the URL you provided. After saving the script, when accessing the URL, the script will wait for 3 seconds and then automatically click the OK button in the pop-up box. You can adjust the wait time as needed to ensure the popup is fully loaded.

If the pop-up box appears on the page through asynchronous loading or lazy loading, you may need to refresh the page to ensure that the pop-up box element has been loaded so that the button can be obtained and clicked correctly.

To add auto-detection code, you can use a MutationObserver to listen for changes in DOM elements and trigger clicks when the popup box appears. Here is the updated sample code:


// ==UserScript==
// @name         自动点击弹出框确定按钮
// @namespace    http://huaiyang.hnjichujiaoyu.com/
// @version      1.0
// @description  自动点击弹出框确定按钮
// @match        http://huaiyang.hnjichujiaoyu.com/*
// @grant        none
// ==/UserScript==
 
(function() {
    'use strict';
 
    // 创建一个MutationObserver实例，用于监听DOM变化
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            // 检查是否有匹配的弹出框按钮元素出现
            var confirmButton = document.querySelector('.layui-layer-btn0');
            if (confirmButton) {
                // 停止监听DOM变化
                observer.disconnect();
                // 模拟点击确定按钮
                confirmButton.click();
            }
        });
    });
 
    // 配置MutationObserver监听的目标节点和选项
    var targetNode = document.body;
    var config = { childList: true, subtree: true };
 
    // 启动MutationObserver
    observer.observe(targetNode, config);
})();

This code will monitor DOM changes on the page. Once the pop-up button appears in the DOM, it will automatically click the OK button. This way, you no longer have to manually refresh the page for automatic clicks.

Links to literature materials:

Here are some relevant literature and resource links to learn more about JavaScript automation and pop-up box handling:

How to use js to get the pop-up box btn button from the following code and automatically click OK in Oil Monkey

Guess you like