如何将CSS应用到iframe?

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

当前回答

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

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

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

其他回答

以上方法稍加改变即可奏效:

var cssLink = document.createElement("link") 
cssLink.href = "pFstylesEditor.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 

//Instead of this
//frames['frame1'].document.body.appendChild(cssLink);
//Do this

var doc=document.getElementById("edit").contentWindow.document;

//If you are doing any dynamic writing do that first
doc.open();
doc.write(myData);
doc.close();

//Then append child
doc.body.appendChild(cssLink);

工作良好的ff3和ie8至少

2009-07-28 22:53:01

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

2008-10-20 08:37:01

如果你有访问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').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });

2017-09-01 10:15:49

下面的方法对我很有效。

var iframe = top.frames[name].document;
var css = '' +
          '<style type="text/css">' +
          'body{margin:0;padding:0;background:transparent}' +
          '</style>';
iframe.open();
iframe.write(css);
iframe.close();

2011-05-23 16:22:09

如何将CSS应用到iframe?

推荐文章

最新文章

标签