在 iframe 中引入外部样式，不能直接通过父页面的 CSS 控制 iframe 内部内容的样式，因为 iframe 拥有独立的文档上下文。若想为 iframe 内容应用外部样式，需从 iframe 所加载的页面本身入手。

1. 在 iframe 页面中引入外部 CSS

确保被 iframe 加载的 HTML 页面内部通过 标签引入外部样式表：

例如，iframe 指向的页面内容应包含：

  


  
这是被样式化的标题

2. 动态注入样式（同源前提下）

如果 iframe 与父页面同源（协议、域名、端口一致），可通过 JavaScript 动态插入样式：

const iframe = document.getElementById('myIframe');
iframe.onload = function() {
  const doc = iframe.contentDocument;
  const link = doc.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'https://example.com/custom-style.css';
  doc.head.appendChild(link);
};

3. 使用 postMessage 跨域通信（有限支持）

跨域时无法直接操作 iframe 内容。可让目标页面监听消息，根据指令切换预设的样式：

父页面发送消息：

iframe.contentWindow.postMessage({ action: 'applyStyle', url: 'dark-theme.css' }, '*');

iframe 页面内监听并处理：

window.addEventListener('message', function(e) {
  if (e.data.action === 'applyStyle') {
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = e.data.url;
    document.head.appendChild(link);
  }
});

4. 注意事项

• 跨域 iframe 受同源策略限制，父页面无法访问其 DOM
• 所有样式必须由 iframe 自身页面加载或响应协作完成
• 推荐将样式文件部署到可公开访问的 CDN 或服务中