如何从父文档为页面嵌入iframe的body元素添加CSS类名

• 直接诱因：addClass() 是jQuery专属方法，通过contentDocument.body获取到的是原生DOM对象，不存在该方法，因此抛出类型错误。
• jQuery替代写法失效的常见原因：
  1. 同源策略限制：若iframe与父页面的域名、协议、端口任意一项不匹配，浏览器会强制禁止父页面操作iframe内部DOM，属于安全限制，无通用绕过方案。
  2. 执行时机问题：若代码执行时iframe还未完成加载，也会无法获取到内部body元素导致操作失效。

NightVersionButton.click(function (event) {
    // 原有父页面样式修改逻辑保留
    event.preventDefault();
    Cookies.set('contrast', 'night', { expires: 7, path: window.cookiePath });
    body.removeClass('highcontrast highcontrast2 highcontrast3');
    body.addClass('night');
    
    var all_iframes = document.getElementsByTagName('iframe');
    for (let single_iframe of all_iframes) {
        // 增加错误捕获，避免跨域iframe阻塞主逻辑
        try {
            const iframe_win = single_iframe.contentWindow;
            if (!iframe_win) continue;
            const iframe_doc = iframe_win.document || single_iframe.contentDocument;
            if (!iframe_doc?.body) continue;

            // 改用原生DOM API操作类名，无jQuery依赖
            iframe_doc.body.classList.remove('highcontrast', 'highcontrast2', 'highcontrast3');
            iframe_doc.body.classList.add('night');

            // 若要使用jQuery写法，确保当前环境jQuery正常引入，可替换为：
            // $(single_iframe).contents().find('body').removeClass('highcontrast highcontrast2 highcontrast3').addClass('night');
        } catch (err) {
            console.warn('无法操作跨域iframe：', single_iframe.src, err);
        }
    }
});

• 同域自有iframe场景下，更推荐用postMessage做跨文档通信，由iframe自身监听样式切换事件修改内部样式，兼容性更好，也支持动态加载、懒加载的iframe场景。
• 第三方嵌入的跨域iframe无法通过父页面修改内部样式，属于浏览器正常安全限制。

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