如何将CSS应用到iframe?

我有一个简单的页面，有一些iframe部分(显示RSS链接)。如何将相同的CSS格式从主页应用到iframe中显示的页面?

当前回答

如果您在iframe中控制页面，如hangy所说，最简单的方法是创建一个具有通用样式的共享CSS文件，然后只需从html页面链接到它。

否则，您不太可能从iframe中的外部页面动态更改页面的样式。这是因为浏览器已经加强了跨帧dom脚本的安全性，因为可能会滥用欺骗和其他黑客行为。

本教程可能会为您提供更多关于编写iframe脚本的信息。关于跨框架脚本从IE的角度解释了安全限制。

2008-10-20 08:52:14

其他回答

这里的其他答案似乎使用了jQuery和CSS链接。

这段代码使用了普通JavaScript。它创建了一个新的<style>元素。它将该元素的文本内容设置为包含新CSS的字符串。它将该元素直接追加到iframe文档的头部。

var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
  '.some-class-name {' +
  '  some-style-name: some-value;' +
  '}' 
;
iframe.contentDocument.head.appendChild(style);

2016-07-07 00:59:53

当你说“doc.open()”这意味着你可以在iframe里面写任何HTML标签，所以你应该为HTML页面写所有的基本标签，如果你想在你的iframe头部有一个CSS链接，就写一个iframe里面有CSS链接。我给你们举个例子:

doc.open();

doc.write('<!DOCTYPE html><html><head><meta charset="utf-8"/><meta http-quiv="Content-Type" content="text/html; charset=utf-8"/><title>Print Frame</title><link rel="stylesheet" type="text/css" href="/css/print.css"/></head><body><table id="' + gridId + 'Printable' + '" class="print" >' + out + '</table></body></html>');

doc.close();

2010-11-08 06:25:23

var link1 = document.createElement('link'); link1。type = 'text/css'; link1。rel =“样式表”; link1。href = "../../assets/css/normalize.css"; 窗口框架[' richTextField ']文件。身体。appendChild (link1);

2016-10-28 03:14:28

作为替代，你可以使用CSS-in-JS技术，如下所示:

https://github.com/cssobj/cssobj

它可以动态地将JS对象作为CSS注入iframe

2017-01-04 02:27:00

如果您在iframe中控制页面，如hangy所说，最简单的方法是创建一个具有通用样式的共享CSS文件，然后只需从html页面链接到它。

否则，您不太可能从iframe中的外部页面动态更改页面的样式。这是因为浏览器已经加强了跨帧dom脚本的安全性，因为可能会滥用欺骗和其他黑客行为。

本教程可能会为您提供更多关于编写iframe脚本的信息。关于跨框架脚本从IE的角度解释了安全限制。

2008-10-20 08:52:14

如何将CSS应用到iframe?

推荐文章

最新文章

标签