如何从iframe中获取并动态删除指定div？（QT应用场景）

核心问题分析 #

你提到的目标元素刷新后无法直接捕获，大概率是因为它动态加载或位于iframe内部（Discord小部件通常以iframe形式嵌入），直接的querySelector只能在元素已渲染时生效，无法应对异步加载场景。

解决方案1：监听主文档DOM变化（元素在主文档动态渲染） #

使用MutationObserver监听整个文档的DOM变化，一旦目标元素出现就立即删除：

// 配置监听选项：监听子元素变化，包含所有子树
const observerConfig = {
  childList: true,
  subtree: true
};

// 检查并删除目标元素的函数
const removeTargetElement = () => {
  const target = document.querySelector("#root > main > div:nth-child(2) > div > form > div > p");
  if (target) {
    target.remove();
    // 若只需删除一次，可在此处执行 observer.disconnect(); 停止监听
  }
};

// 创建监听器并绑定到body
const observer = new MutationObserver(removeTargetElement);
observer.observe(document.body, observerConfig);

// 页面加载完成后先执行一次检查
window.addEventListener('load', removeTargetElement);

解决方案2：处理iframe内的元素（更可能的场景） #

Discord小部件一般嵌入在iframe中，需要先定位iframe，再监听其内部DOM变化：

// 循环查找目标iframe
const waitForWidgetIframe = () => {
  const iframe = document.querySelector('iframe[src*="widgetbot"]');
  if (!iframe) {
    // 未找到则1秒后重试
    setTimeout(waitForWidgetIframe, 1000);
    return;
  }

  // 监听iframe加载完成事件
  iframe.addEventListener('load', () => {
    try {
      // 获取iframe内部的document对象
      const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;

      // 配置iframe内的DOM监听器
      const observerConfig = {
        childList: true,
        subtree: true
      };

      const removeTargetInIframe = () => {
        const target = iframeDoc.querySelector("#root > main > div:nth-child(2) > div > form > div > p");
        if (target) target.remove();
      };

      const iframeObserver = new MutationObserver(removeTargetInIframe);
      iframeObserver.observe(iframeDoc.body, observerConfig);

      // iframe加载完成后立即检查一次
      removeTargetInIframe();
    } catch (e) {
      console.error("无法访问iframe内容：跨域限制");
    }
  });

  // 若iframe已加载完成，手动触发load事件
  if (iframe.contentDocument?.readyState === 'complete') {
    iframe.dispatchEvent(new Event('load'));
  }
};

// 页面加载后启动查找流程
window.addEventListener('load', waitForWidgetIframe);

QT应用中注入脚本的方式 #

在QT的QWebEngineView中，需要将上述JS代码注入页面，确保刷新后依然生效：

#include <QWebEngineView>
#include <QWebEngineScript>

void initWidgetWebView(QWebEngineView* webView) {
    QString jsCode = R"(
        const waitForWidgetIframe = () => {
          const iframe = document.querySelector('iframe[src*="widgetbot"]');
          if (!iframe) {
            setTimeout(waitForWidgetIframe, 1000);
            return;
          }

          iframe.addEventListener('load', () => {
            try {
              const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
              const observerConfig = { childList: true, subtree: true };

              const removeTargetInIframe = () => {
                const target = iframeDoc.querySelector("#root > main > div:nth-child(2) > div > form > div > p");
                if (target) target.remove();
              };

              const iframeObserver = new MutationObserver(removeTargetInIframe);
              iframeObserver.observe(iframeDoc.body, observerConfig);
              removeTargetInIframe();
            } catch (e) {
              console.error("跨域限制无法访问iframe");
            }
          });

          if (iframe.contentDocument?.readyState === 'complete') {
            iframe.dispatchEvent(new Event('load'));
          }
        };

        window.addEventListener('load', waitForWidgetIframe);
    )";

    // 创建持久化脚本，页面刷新后自动执行
    QWebEngineScript script;
    script.setSourceCode(jsCode);
    script.setInjectionPoint(QWebEngineScript::DocumentReady);
    script.setWorldId(QWebEngineScript::MainWorld);
    script.setRunsOnSubFrames(true); // 允许脚本在iframe中运行

    webView->page()->scripts().insert(script);
}

注意事项 #

1. 跨域问题：若iframe与QT页面不同域，浏览器会阻止访问其内容，需要在QT的WebEngine配置中允许跨域，或优先使用WidgetBot官方提供的配置参数（比如是否禁用发送功能，比删除元素更可靠）。
2. 选择器稳定性：依赖嵌套的:nth-child选择器容易因DOM结构更新失效，建议替换为目标元素的特定class/属性选择器（例如iframeDoc.querySelector('.send-form-container')）。

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