XPath与querySelector匹配不到元素无法关闭HTML弹窗如何解决？

问题原因与解决方案 #

1. 弹窗为延迟异步渲染，执行代码时元素还未插入DOM #

弹窗是页面加载完成后数秒才渲染的，你在页面刚加载完成时就执行查找代码，自然匹配不到元素。可以写轮询逻辑等待元素加载完成后再执行点击操作，代码同时兼容了iframe内部元素查找：

// 轮询查找目标元素，默认最长等待10秒
function waitForElement(selector, timeout = 10000) {
  return new Promise((resolve, reject) => {
    const startTime = Date.now();
    const timer = setInterval(() => {
      // 先在当前页面DOM树查找
      let target = document.querySelector(selector);
      // 没找到就遍历所有iframe内部查找
      if (!target) {
        const iframes = document.querySelectorAll('iframe');
        for (const iframe of iframes) {
          try {
            // 跨域iframe会触发同源策略报错，直接跳过
            target = iframe.contentDocument.querySelector(selector);
            if (target) break;
          } catch (e) {}
        }
      }
      // 找到元素就返回，超时就抛出错误
      if (target) {
        clearInterval(timer);
        resolve(target);
      } else if (Date.now() - startTime > timeout) {
        clearInterval(timer);
        reject(new Error('元素查找超时'));
      }
    }, 300);
  })
}

// 调用示例：查找目标元素后自动点击
waitForElement('div.frame-container div.layer-wiziwig div:first-child')
  .then(element => element.click())
  .catch(err => console.log(err));

如果你需要用XPath查找，只需要把document.evaluate的执行上下文从document换成对应iframe的contentDocument即可。

2. 原有选择器存在语法错误 #

你之前使用的document.querySelectorAll('div .layer-wiziwig')[0]中，div和类名之间的空格代表「查找div元素的后代节点中带有layer-wiziwig类的元素」，如果目标元素本身就是带有layer-wiziwig类的div元素，需要去掉空格写为div.layer-wiziwig。

3. 弹窗渲染在跨域iframe中 #

如果弹窗是第三方提供的跨域iframe资源，受浏览器同源策略限制，你无法直接操作iframe内部的元素，这种情况可以直接插入全局样式隐藏弹窗：

const hideStyle = document.createElement('style');
hideStyle.textContent = `
  div.layer-wiziwig, div.frame-container {
    display: none !important;
    visibility: hidden !important;
  }
`;
document.head.appendChild(hideStyle);

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