答案：控制iframe样式需从源页面入手。1. 在iframe页面中通过link标签引入CSS；2. 同源时用JavaScript动态注入样式；3. 跨域可通过postMessage通信切换预设样式；4. 样式必须由iframe自身加载或协作完成，受限于同源策略。
在 iframe 中引入外部样式，不能直接通过父页面的 CSS 控制 iframe 内部内容的样式，因为 iframe 拥有独立的文档上下文。若想为 iframe 内容应用外部样式，需从 iframe 所加载的页面本身入手。
1. 在 iframe 页面中引入外部 CSS
确保被 iframe 加载的 HTML 页面内部通过 标签引入外部样式表：
例如，iframe 指向的页面内容应包含：
立即学习“前端免费学习笔记（深入）”；
这是被样式化的标题
2. 动态注入样式（同源前提下）
如果 iframe 与父页面同源（协议、域名、端口一致），可通过 JavaScript 动态插入样式：
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
508 查看详情
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 或服务中基本上就这些方法，关键在于控制 iframe 源页面的内容或与其协作。
以上就是css如何在iframe中引入外部样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1008637.html
微信扫一扫 
支付宝扫一扫 
