怎么获取弹出对话框的模拟单击

Question

我在用js实现自动化刷课脚本的时候，要处理一个“继续学习”弹出对话框，才能播放。
使用document.queryselctor('.continue')获取不到，好像也没有click事件;
有谁能帮忙看看吧

  <div id="mask"></div>
        <!--是否继续学习的弹出框-->
        <div class="continue">
            <div style="color:#ff5400"></div>
            <div class="user_choise"></div>
        </div>
        <!--不支持video的提示-->
        <div class="no_support">
            <div class="no_support_title">提示</div>
            <div class="no_support_content">您的浏览器版本过低不支持H5视频播放，请升级浏览器版本，或使用谷歌浏览器</div>
            <div class="confirm_btn">确认</div>
        </div>

f(sco) {curr=0;}
        if(parseInt(now_chapter[0])<1){
            $(".continue div:eq(0)").html(continue_msg.begin.msg);
            $(".continue div:eq(1)").html(continue_msg.begin.btn);
            player.otherClips=false;
        }else{
            $(".continue div:eq(0)").html(continue_msg["continue"].msg(pos));
            $(".continue div:eq(1)").html(continue_msg["continue"].btn);
        }

    //点击继续学习
    $(".continue .user_choise").click(function(){
        $("#mask,.continue").hide();
        //$(".continue").remove();

        //判断浏览器是否支持video播放
        if(!document.createElement('video').canPlayType){
            $(".no_support,#mask").show();
        }else{
            player.continuePlay();
        }
    });

感谢大家

Answer 1

下午好🌅🌅🌅
本答案参考通义千问

解决获取弹出对话框并模拟点击的问题

根据你提供的代码，我看到你正在尝试处理一个"继续学习"的弹出对话框。以下是几种可能的解决方案：

问题分析

1. 你使用 document.querySelector('.continue') 获取不到元素，可能是因为：

   • 对话框初始状态是隐藏的
   • 对话框是动态生成的
   • 选择器可能不正确

2. 从代码中可以看到对话框是通过jQuery操作的，且点击事件绑定在 .continue .user_choise 上

解决方案

方案1：使用MutationObserver监听DOM变化

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        const continueDialog = document.querySelector('.continue');
        if (continueDialog && continueDialog.style.display !== 'none') {
            const userChoice = document.querySelector('.continue .user_choise');
            if (userChoice) {
                userChoice.click();
                observer.disconnect(); // 停止观察
            }
        }
    });
});

// 配置观察选项
const config = { 
    childList: true, 
    subtree: true,
    attributes: true,
    attributeFilter: ['style']
};

// 开始观察document.body
observer.observe(document.body, config);

方案2：使用定时器检查对话框出现

function clickContinueButton() {
    const continueDialog = document.querySelector('.continue');
    if (continueDialog && continueDialog.style.display !== 'none') {
        const userChoice = document.querySelector('.continue .user_choise');
        if (userChoice) {
            userChoice.click();
            return true;
        }
    }
    return false;
}

// 每500毫秒检查一次
const intervalId = setInterval(() => {
    if (clickContinueButton()) {
        clearInterval(intervalId);
    }
}, 500);

方案3：使用jQuery方式（如果页面已加载jQuery）

$(document).ready(function() {
    // 监听对话框显示
    $(document).on('DOMNodeInserted', '.continue', function() {
        $('.continue .user_choise').click();
    });
    
    // 或者直接尝试点击
    $('.continue .user_choise').click();
});

注意事项

1. 对话框显示时机：确保你的代码在对话框显示后执行
2. 跨域限制：如果是在浏览器扩展中运行，可能需要处理跨域问题
3. 延迟加载：有些元素是延迟加载的，需要等待足够时间
4. iframe问题：如果对话框在iframe中，需要先获取iframe的document

完整示例

// 等待页面加载完成
window.addEventListener('load', function() {
    // 使用MutationObserver监听DOM变化
    const observer = new MutationObserver(function(mutations) {
        const continueDialog = document.querySelector('.continue');
        if (continueDialog && continueDialog.style.display !== 'none') {
            const userChoice = document.querySelector('.continue .user_choise');
            if (userChoice) {
                // 模拟点击
                userChoice.click();
                observer.disconnect();
            }
        }
    });
    
    observer.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        attributeFilter: ['style']
    });
    
    // 同时设置定时器作为备用方案
    const intervalId = setInterval(() => {
        const userChoice = document.querySelector('.continue .user_choise');
        if (userChoice && userChoice.offsetParent !== null) {
            userChoice.click();
            clearInterval(intervalId);
        }
    }, 500);
});

希望这些解决方案能帮助你成功处理这个弹出对话框！如果还有其他问题，可以继续补充更多上下文信息。