JavaScript获取Aviator游戏按钮BET标签返回undefined问题咨询

场景说明 #

目标页面为Spribe的Aviator游戏，浏览器检查器中看到的BET按钮元素如下：

<label _ngcontent-nyq-c70="" translate="" class="font-family-title label">BET</label>

尝试用以下代码获取文本BET，但返回undefined：

var test = document.getElementsByClassName("font-family-title label")[0].innerText;
console.log("test is: "+test);

解决思路 #

• 检查元素是否在iframe内：多数网页游戏会把游戏内容嵌入iframe，直接用顶层document无法获取iframe内的元素。需要先定位到游戏对应的iframe，再在iframe的文档中查找：

  // 先定位目标iframe（可根据实际属性调整选择器）
  const gameIframe = document.querySelector('iframe[src*="aviator"]');
  if (gameIframe) {
    const iframeDoc = gameIframe.contentDocument || gameIframe.contentWindow.document;
    const betLabel = iframeDoc.querySelector('.font-family-title.label');
    betLabel && console.log("test is: " + betLabel.textContent);
  } else {
    console.log("未找到游戏对应的iframe");
  }
  

• 替换innerText为textContent：innerText会受元素的CSS显示状态影响，而textContent直接读取节点的原始文本内容，可靠性更高：

  const betLabel = document.getElementsByClassName("font-family-title label")[0];
  console.log("test is: " + (betLabel?.textContent || "未找到元素"));
  

• 确保代码在元素加载后执行：如果代码执行时机过早，元素还未渲染完成，会导致获取失败。可以通过监听DOM加载完成或延迟执行来解决：

  // 等待DOM加载完成后执行
  document.addEventListener('DOMContentLoaded', function() {
    const betLabel = document.querySelector('.font-family-title.label');
    console.log("test is: " + (betLabel?.textContent || "未找到元素"));
  });
  
  // 或者用MutationObserver监听元素出现
  const observer = new MutationObserver((mutations) => {
    const betLabel = document.querySelector('.font-family-title.label');
    if (betLabel) {
      console.log("test is: " + betLabel.textContent);
      observer.disconnect();
    }
  });
  observer.observe(document.body, { childList: true, subtree: true });
  

• 考虑Angular动态渲染的影响：元素带有translate属性，属于Angular的国际化指令，文本可能是动态插入的。可以尝试延迟几秒执行代码，等待Angular完成渲染：

  setTimeout(() => {
    const betLabel = document.querySelector('.font-family-title.label');
    console.log("test is: " + (betLabel?.textContent || "未找到元素"));
  }, 3000); // 延迟3秒，可根据实际情况调整
  

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