如何用JavaScript/JQuery修改InMobi Choice同意弹窗文本？

我的网站使用第三方同意工具InMobi Choice，它通过异步JavaScript加载并生成用户同意弹窗。我能正常修改本地页面文本（比如用document.getElementsByClassName("myClass")[0].innerHTML = 'new text';或$(".myClass").text('new text');），但无法修改该工具生成弹窗中的文本。

弹窗DOM结构如下：

<div class="qc-cmp2-container" id="qc-cmp2-container" data-nosnippet="">
  <div class="qc-cmp2-main" id="qc-cmp2-main" data-nosnippet="">
    <div id="qc-cmp2-ui" role="dialog" aria-label="qc-cmp2-ui">
      [...]
      <div class="qc-cmp2-consent-info">
       Text to be changed...
     </div>
    </div>
  </div>
</div>

我能在控制台通过console.log(document.getElementsByClassName("qc-cmp2-consent-info"));看到该元素，但执行$(".qc-cmp2-consent-info").text('new text');这类代码完全没效果，请问有没有可行的修改方法？

1. 等待弹窗DOM完全加载后执行修改 #

弹窗是异步加载的，你的代码可能在元素未完全渲染时就执行了。可以通过以下两种方式确保元素存在后再修改：

方法A：用MutationObserver监听DOM变化

// 监听弹窗容器的DOM节点变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const targetEl = document.querySelector('.qc-cmp2-consent-info');
      if (targetEl) {
        targetEl.textContent = '你的新文本';
        observer.disconnect(); // 修改完成后停止监听
      }
    }
  });
});

// 启动监听，若容器未加载则等页面完成后再尝试
window.addEventListener('load', () => {
  const container = document.getElementById('qc-cmp2-container');
  if (container) {
    observer.observe(container, { childList: true, subtree: true });
  }
});

方法B：延迟轮询检查元素

function updatePopupText() {
  const targetEl = document.querySelector('.qc-cmp2-consent-info');
  if (targetEl) {
    targetEl.textContent = '你的新文本';
  } else {
    // 每隔500ms检查一次，直到找到元素
    setTimeout(updatePopupText, 500);
  }
}

// 页面加载完成后启动轮询
window.addEventListener('load', updatePopupText);

2. 检查是否存在Shadow DOM #

部分第三方工具会把弹窗放在Shadow DOM内，常规DOM选择器无法直接访问。可以尝试：

const container = document.getElementById('qc-cmp2-container');
if (container?.shadowRoot) {
  const targetEl = container.shadowRoot.querySelector('.qc-cmp2-consent-info');
  if (targetEl) targetEl.textContent = '你的新文本';
}

3. 用CSS伪元素覆盖文本 #

如果JS修改无效，可尝试用CSS隐藏原文本，再通过伪元素插入新内容：

.qc-cmp2-consent-info {
  visibility: hidden;
  position: relative;
}

.qc-cmp2-consent-info::before {
  content: '你的新文本';
  visibility: visible;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: inherit;
}

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