如何用JS无需点击元素即可检测未加载的转盘DIV状态？

我正在玩一款游戏，点击小图片会触发JS事件打开带转盘的窗口。窗口打开后HTML才会更新，目标DIV（在START按钮下方，显示“FREE SPIN”或“3 gems”）才会出现。我写了按钮和SpinWheel()函数，但这个函数只有在转盘窗口打开时才能正常检测状态，现在想实现无需打开窗口就能检测状态，求技术方案和解决方向。

JavaScript 函数 #

function SpinWheel() {

  // 获取ID为"freeforSpin"的元素
  var freeforSpin = ById('freeforSpin');
  var gemforSpin = ById('gemforSpin');

  // 如果"freeforSpin"元素存在
  if (freeforSpin) {
    // 检查"freeforSpin"内是否存在ID为"FreeSp"的元素
    var FreeSp = freeforSpin.querySelector("#FreeSp");
    if (FreeSp) {
      // 调用转盘旋转方法，更新按钮文本
      cm.SpinController.doSpin();
      ById('mySpinButton').innerHTML = "FREE SPIN";
      return "FREE SPIN";
    }
  }

  // 如果"gemforSpin"元素存在
  if (gemforSpin) {
    // 检查"gemforSpin"内是否存在ID为"costSp"的元素
    var costSp = gemforSpin.querySelector("#costSp");
    if (costSp) {
      // 更新按钮文本
      ById('mySpinButton').innerHTML = "No More Spins";
      return "No More Spins";
    }
  }
}

HTML 按钮 #

<button id="mySpinButton" type="button" onclick="SpinWheel()">CHECK SPIN</button>

1. 直接读取游戏状态数据 #

游戏的转盘状态（免费/需3宝石）肯定存储在全局变量或状态管理对象里，不用等DOM渲染：

• 在控制台打印cm对象，查看cm.SpinController下的属性，比如hasFreeSpin、spinCost这类直接存储状态的字段
• 寻找游戏全局状态容器，比如gameState.wheel或类似路径，直接读取状态值

2. 模拟窗口打开的触发逻辑 #

找到打开转盘窗口的JS事件（比如点击小图片时调用的cm.WheelWindow.open()），拆解内部逻辑：

• 这个函数大概率会先读取本地状态或请求后端数据，再渲染DOM。你可以直接调用其中获取状态的代码段，跳过DOM渲染步骤
• 如果函数是封装好的，可重写函数钩子，在它更新状态时同步记录值，后续直接读取记录

3. 监听DOM变化（备选） #

如果前两种方法行不通，用MutationObserver监听可能出现目标DIV的父容器，即使窗口未打开，只要游戏偷偷更新隐藏DOM，就能捕获状态：

// 假设转盘窗口的父容器ID是wheelContainer
const observer = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.addedNodes.length) {
      const freeforSpin = document.getElementById('freeforSpin');
      const gemforSpin = document.getElementById('gemforSpin');
      // 复用原有检测逻辑
      if (freeforSpin && freeforSpin.querySelector("#FreeSp")) {
        document.getElementById('mySpinButton').innerHTML = "FREE SPIN";
      } else if (gemforSpin && gemforSpin.querySelector("#costSp")) {
        document.getElementById('mySpinButton').innerHTML = "No More Spins";
      }
    }
  });
});

// 启动监听，监听父容器的子节点变化
observer.observe(document.getElementById('wheelContainer'), { childList: true, subtree: true });

4. 逆向接口请求 #

如果打开窗口时游戏会发AJAX请求获取状态，直接调用该接口：

• 用浏览器开发者工具Network面板，过滤XHR/Fetch请求，找到打开转盘时的请求
• 复制请求URL和参数，用fetch或XMLHttpRequest直接调用，解析返回的JSON数据判断状态

内容的提问来源于stack exchange，提问作者JoeJoe