如何将CSS应用到iframe?

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

当前回答

这里的其他答案似乎使用了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

其他回答

扩展上面的jQuery解决方案来处理加载帧内容的延迟。

$('iframe').each(function(){
    function injectCSS(){
        $iframe.contents().find('head').append(
            $('<link/>', { rel: 'stylesheet', href: 'iframe.css', type: 'text/css' })
        );
    }

    var $iframe = $(this);
    $iframe.on('load', injectCSS);
    injectCSS();
});

2013-06-24 11:14:10

我遇到了谷歌日历这个问题。我想用更暗的背景和改变字体。

幸运的是，来自嵌入代码的URL对直接访问没有限制，因此通过使用PHP函数file_get_contents可以获得来自页面的全部内容。而不是调用谷歌URL，可以调用位于您的服务器上的php文件，例如Google .php，它将包含修改的原始内容:

$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');

将路径添加到样式表:

$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);

(这将把样式表放在头结束标记之前的最后。)

在css和js被相对调用的情况下，从原始url中指定基url:

$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);

最终的google.php文件应该是这样的:

<?php
$content = file_get_contents('https://www.google.com/calendar/embed?src=%23contacts%40group.v.calendar.google.com&ctz=America/Montreal');
$content = str_replace('</title>','</title><base href="https://www.google.com/calendar/" />', $content);
$content = str_replace('</head>','<link rel="stylesheet" href="http://www.yourwebsiteurl.com/google.css" /></head>', $content);
echo $content;

然后将iframe嵌入代码更改为:

<iframe src="http://www.yourwebsiteurl.com/google.php" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>

好运！

2012-09-20 22:21:17

我找到了另一个解决方案，把样式放在主html像这样

<style id="iframestyle">
    html {
        color: white;
        background: black;
    }
</style>
<style>
    html {
        color: initial;
        background: initial;
    }
    iframe {
        border: none;
    }
</style>

然后在iframe中这样做(参见js的onload)

<iframe  onload="iframe.document.head.appendChild(ifstyle)" name="log" src="/upgrading.log"></iframe>

在js中

<script>
    ifstyle = document.getElementById('iframestyle')
    iframe = top.frames["log"];
</script>

这可能不是最好的解决方案，当然也可以改进，但如果您想在父窗口中保留“style”标签，这是另一种选择

2015-03-18 14:51:00

我是这么做的:

Div与类保存iframe 将iframe添加到div中。在CSS文件中

divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

这在IE 6中有效。应该可以在其他浏览器上运行，请检查!

2010-12-08 09:46:02

当你说“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

如何将CSS应用到iframe?

推荐文章

最新文章

标签