非同源iframe 怎么在外部设置内部样式

非同源iframe（Cross-Origin Resource Sharing, CORS）限制了来自不同源的脚本对另一个域下的资源（如CSS、JavaScript等）的直接访问，这是出于安全考虑。由于浏览器的安全策略，你不能直接通过JavaScript修改非同源iframe的内容或样式。

但是，有几种间接的方式可以在一定程度上控制非同源iframe内的样式：

1. **利用postMessage API**: 可以在主页面上发送消息到iframe，然后在接收方（通常是iframe的内容窗口）内部处理这个消息并应用相应的样式更改。例如：

   window.parent.postMessage({ style: 'your-style-string' }, '*');

主页需要监听`message`事件并允许相应来源的通信。

2. **CSS注入（CSS inlining）**: 主页面可以动态生成CSS规则，并将它们内联到iframe的`<style>`标签中，虽然这可能不适用于复杂或大量的样式：

   const iframe = document.getElementById('your-iframe-id');
   const cssRule = '.some-class { your-style; }';
   iframe.contentDocument.head.appendChild(document.createElement('style')).innerHTML = cssRule;

3. **修改iframe内容本身**：如果可能的话，可以在加载iframe之前先预加载样式表文件，使其成为同一源的一部分。然后，再嵌入到iframe中。

需要注意的是，这些方法并不能突破CORS的基本限制，只适用于有限的场景。在实际应用中，尽量保持跨域资源共享的最小化，以遵守网络安全性原则。