如何跨域获取iframe的document修改css

在JavaScript中，由于浏览器的同源策略（Same-Origin Policy），从一个域下的网页（iframe）直接访问另一个域的`document`并修改其CSS是受限的。这是因为出于安全考虑，浏览器不允许一个页面访问来自其他来源的内容。

但是，有一些方法可以间接实现部分跨域操作：

1. **JSONP (JSON with Padding)**: 利用script标签的src属性加载异步数据，服务端返回的数据包裹在一个函数调用中，允许接收跨域数据，然后在回调函数中处理CSS信息。

function handleCSS(json) {
    // json.data 包含了需要应用的CSS样式
    document.getElementById('target').style.cssText = json.data;
}

// 使用JSONP请求
var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handleCSS';
document.head.appendChild(script);

2. **CORS (Cross-Origin Resource Sharing)**: 如果服务器支持CORS，可以从服务器端设置响应头`Access-Control-Allow-Origin`来指定哪些域名可以访问资源。客户端无法直接控制，但服务器配置后可以允许跨域读取样式信息。

3. **PostMessage API**: 通过`window.postMessage()`发送消息到目标iframe，目标iframe接收到消息后可以在自己的上下文中修改CSS。这通常用于父子窗口之间的通信。

// 主页面
document.getElementById('cross-origin').addEventListener('message', function(e) {
  if (e.origin !== 'https://other-domain.com') return; // 验证来源
  e.source.document.body.style.color = 'red'; // 修改样式
});

// 跨域页面
window.postMessage({ cssChange: 'color: red;' }, '*'); // 发送消息

**