如何将CSS应用到iframe?

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

当前回答

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

https://github.com/cssobj/cssobj

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

2017-01-04 02:27:00

其他回答

iframe被大多数浏览器像处理一个不同的HTML页面一样处理。如果希望对iframe的内容应用相同的样式表，只需从其中使用的页面引用它。

2008-10-20 08:37:01

这只是一个概念，但是不要在没有安全检查和过滤的情况下实现它!否则脚本可能会攻击您的站点!

答:如果你控制目标站点，你可以像这样设置接收器脚本:

1)使用style参数设置iframe链接，如下:

http://your_site.com/target.php?color=red

(最后一个短语是urlencode函数编码的{color:red}。

2)像这样设置接收页面target.php:

<head>
..........
$col = FILTER_VAR(SANITIZE_STRING, $_GET['color']);
<style>.xyz{color: <?php echo (in_array( $col, ['red','yellow','green'])?  $col : "black") ;?> } </style>
..........

2016-10-17 08:01:32

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

如果你有访问iframe页面，想要一个不同的CSS应用在它上，只有当你加载它通过iframe在你的页面上，在这里我找到了一个解决方案，这类事情

即使iframe正在加载不同的域，这也是有效的

检查postMessage()

计划是，将CSS作为消息发送到iframe

iframenode.postMessage('h2{color:red;}','*');

*是发送这条消息，不管它在iframe中的哪个域

并在iframe中接收消息，并将接收到的消息(CSS)添加到该文档头。

在iframe页面中添加的代码

window.addEventListener('message',function(e){

    if(e.data == 'send_user_details')
    document.head.appendChild('<style>'+e.data+'</style>');

});

2016-05-19 20:20:18

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

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

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

2008-10-20 08:52:14

如何将CSS应用到iframe?

推荐文章

最新文章

标签