如何从一下代码中用js获取弹出框btn按钮并在油猴中自动点击确定

鱼弦

已于 2023-08-12 01:11:35 修改

阅读量3k

点赞数

分类专栏：【练习两年半】程序基础文章标签： javascript 前端 html

于 2023-07-15 09:08:56 首次发布

本文链接：https://blog.csdn.net/feng1790291543/article/details/130955322

版权

【练习两年半】程序基础专栏收录该内容

89 篇文章 3 订阅

订阅专栏

鱼弦：CSDN内容合伙人、CSDN新星导师、51CTO(Top红人+专家博主) 、github开源爱好者（go-zero源码二次开发、游戏后端架构 https://github.com/Peakchen）

要从代码中使用JavaScript获取弹出框的按钮，并在油猴脚本中自动点击确定按钮，可以使用以下步骤:

检测弹出框: 使用JavaScript的alert、confirm或prompt函数触发弹出框。这些函数会在浏览器中显示一个包含按钮的弹出框。
捕获弹出框: 使用window对象的onbeforeunload事件或window.addEventListener函数来捕获弹出框。当弹出框出现时，会触发onbeforeunload事件，或者可以使用window.addEventListener来监听beforeunload事件。
自动点击按钮: 在事件处理程序中，使用JavaScript来模拟点击弹出框的按钮。可以通过使用document.querySelector或document.getElementById等函数选择按钮元素，并使用click方法触发按钮的点击事件。

以下是一个示例代码，演示如何使用JavaScript获取弹出框的按钮并自动点击确定按钮：

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

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

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

上述代码中，beforeunload事件被监听，当弹出框出现时，会执行事件处理程序。在事件处理程序中，通过document.querySelector选择确定按钮的元素，并使用click方法触发按钮的点击事件，从而自动点击确定按钮。

原理解释：

弹出框通常是使用浏览器原生的对话框实现的，例如alert、confirm或prompt函数。这些函数会在浏览器中显示一个弹出框，包含确定、取消等按钮选项。通过JavaScript，可以捕获弹出框的出现，并模拟点击按钮来实现自动化操作。

使用场景解释：

自动点击弹出框按钮的场景通常出现在需要自动化处理或测试网页的情况下。例如，在网页自动化测试中，可以使用JavaScript自动点击弹出框按钮来测试对话框的交互逻辑。另一个场景是用户脚本（如油猴脚本），可以使用JavaScript自动点击弹出框按钮来处理特定网页上的提示或确认对话框。

要使用JavaScript从给定的HTML代码中获取弹出框按钮并在油猴脚本中自动点击确定按钮，你可以按照以下步骤进行操作：

在油猴脚本中注入JavaScript代码来获取和点击按钮。确保你已经在油猴脚本管理器中创建了一个适用于该网站的脚本。

使用document.querySelector()函数通过CSS选择器获取弹出框按钮元素。在这种情况下，你可以使用".layui-layer-btn0"选择器来选择类名为"layui-layer-btn0"的元素。

使用HTMLElement.click()方法模拟点击操作。

以下是示例代码：

/ ==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秒后执行，可以根据需要调整等待时间
})();

将上述代码复制粘贴到你的油猴脚本中，并确保脚本匹配的网址与你提供的网址一致。保存脚本后，访问该网址时，脚本会等待3秒钟后自动点击弹出框中的确定按钮。你可以根据需要调整等待时间来确保弹出框已完全加载。

如果弹出框是通过异步加载或延迟加载的方式出现在页面上，可能会需要刷新页面才能确保弹出框元素已经加载完毕，从而可以正确获取并点击按钮。

要添加自动检测代码，你可以使用MutationObserver来监听DOM元素的变化，并在弹出框出现时触发点击操作。下面是更新后的示例代码：


// ==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);
})();

这段代码会在页面上监听DOM的变化，一旦弹出框按钮出现在DOM中，就会自动点击确定按钮。通过这种方式，你不再需要手动刷新页面才能自动点击。

文献材料链接：

以下是一些相关的文献和资源链接，可以了解更多关于JavaScript自动化操作和弹出框处理的内容：

鱼弦

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
如何从一下代码中用js获取弹出框btn按钮并在油猴中自动点击确定

将上述代码复制粘贴到你的油猴脚本中，并确保脚本匹配的网址与你提供的网址一致。保存脚本后，访问该网址时，脚本会等待3秒钟后自动点击弹出框中的确定按钮。要添加自动检测代码，你可以使用MutationObserver来监听DOM元素的变化，并在弹出框出现时触发点击操作。这段代码会在页面上监听DOM的变化，一旦弹出框按钮出现在DOM中，就会自动点击确定按钮。如果弹出框是通过异步加载或延迟加载的方式出现在页面上，可能会需要刷新页面才能确保弹出框元素已经加载完毕，从而可以正确获取并点击按钮。
复制链接

扫一扫