求助：如何向iframe body添加类？跨域访问iframe触发DOMException报错

你遇到的这个错误是浏览器的同源策略在起作用——浏览器会阻止不同源（协议、域名、端口任意一个不同就算跨域）的页面互相访问DOM，这是默认的安全机制，防止恶意网站窃取敏感数据。下面给你几个针对性的解决方案：

方案1：让iframe和主页面同源（最直接） #

如果iframe里的内容是你自己可控的，最简单的办法就是把它部署到和主页面（http://127.0.0.1:8080）相同的服务下，保证两者同源。这样你就能直接操作iframe的DOM了，用jQuery的话可以这么写：

setTimeout(function(){
  const $iframe = $('#bfpublish');
  if ($iframe.length) {
    // 同源下直接获取iframe内部的body并添加类
    $iframe.contents().find('body').addClass('your-target-class');
  }
}, 1000); // 延迟执行确保iframe已加载完成

方案2：用postMessage实现跨域通信（适用于无法同源的场景） #

如果iframe的内容不属于你的域名，没法改成同源，那就用浏览器原生的postMessage API来跨域传递指令：

步骤1：在父页面（你的主页面）发送指令 #

setTimeout(function(){
  const iframe = document.getElementById('bfpublish');
  if (iframe) {
    // 发送消息，第二个参数填iframe的实际源（比如https://example.com），*表示允许所有源（不推荐，不安全）
    iframe.contentWindow.postMessage(
      { action: 'addBodyClass', className: 'your-target-class' },
      'https://your-iframe-domain.com'
    );
  }
}, 1000);

步骤2：在iframe页面中监听并执行操作 #

在iframe加载的页面里添加这段代码，用来接收父页面的消息并给body加类：

window.addEventListener('message', function(event) {
  // 一定要验证消息来源，只处理可信的父页面发来的消息
  if (event.origin !== 'http://127.0.0.1:8080') return;
  
  if (event.data.action === 'addBodyClass') {
    document.body.classList.add(event.data.className);
  }
});

⚠️ 注意：必须验证event.origin，避免接收恶意网站的消息，防止安全风险。

方案3：服务器端代理（适用于第三方iframe内容） #

如果iframe加载的是第三方页面，你没法修改它的代码，那可以在你的服务器上做一个代理：让你的服务器去请求第三方页面的内容，然后把内容返回给主页面，这样iframe加载的就是你服务器代理后的内容，和主页面同源。不过这个方法要注意版权问题，还要处理第三方页面里的资源（比如图片、脚本）可能出现的跨域加载问题。

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