同域嵌套iframe内部div的test2类如何移除？

问题原因 #

• 固定500ms延时无法保证iframe2的内部DOM完全加载完成，此时访问contentDocument会返回null，也无法定位到内部元素
• setTimeout的第二个延时参数应为数字类型，你传入的[500]属于不规范写法，部分环境下可能出现执行异常
• jQuery的removeClass()方法仅需传入纯类名即可，你写的removeClass('.test2')多了.前缀，属于语法错误，即使找到目标元素也无法正常移除类

解决方案 #

方案1：监听iframe加载事件后移除类（最稳定） #

通过监听iframe的load事件确保内部资源加载完成后再操作DOM，完全规避加载时机问题：

document.querySelectorAll('iframe').forEach(iframe1 => {
  // 等待第一层iframe加载完成
  iframe1.addEventListener('load', () => {
    const iframe2 = iframe1.contentDocument.body.querySelector('iframe');
    if (!iframe2) return;
    // 修改iframe2宽度
    iframe2.style.width = '100vw';
    // 等待第二层iframe加载完成后操作内部DOM
    iframe2.addEventListener('load', () => {
      // 原生JS实现（不需要依赖jQuery）
      const targetDiv = iframe2.contentDocument.querySelector('.test2');
      targetDiv?.classList.remove('test2');
      
      // 等价jQuery实现，注意类名不要加前缀
      // $(iframe2).contents().find('.test2').removeClass('test2')
    });
  });
});

方案2：直接覆盖样式（无需定位元素，适合仅样式修改场景） #

如果不需要真的移除类，只需要抵消test2的样式效果，可以直接给iframe2注入自定义样式：

// 放在iframe2的load事件回调中使用
const customStyle = iframe2.contentDocument.createElement('style');
customStyle.textContent = `
/* 覆盖test2的原有样式 */
.test2 {
  /* 按需填写要覆盖的样式规则，例如：
  margin: 0 !important;
  background: transparent !important;
  */
  all: unset !important; /* 需清空test2所有样式时可以直接用这个属性 */
}
`;
iframe2.contentDocument.head.appendChild(customStyle);

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