如何将CSS应用到iframe?

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

当前回答

如果你想从主页重用CSS和JavaScript，也许你应该考虑用Ajax加载的内容替换<IFRAME>。当搜索机器人能够执行JavaScript时，这对SEO更加友好。

这是一个jQuery的例子，包括另一个html页面到您的文档。这比iframe更有利于搜索引擎优化。为了确保机器人没有索引所包含的页面，只需在robots.txt中将其添加为禁止

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript"></script>
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

你也可以直接从谷歌:http://code.google.com/apis/ajaxlibs/documentation/中包含jQuery——这意味着可选的自动包含新版本和一些显著的速度提升。同时，这意味着你必须相信他们交付给你的只是jQuery;)

2010-03-02 07:16:41

其他回答

var $head = $("#eFormIFrame").contents().find("head");

$head.append($("<link/>", {
    rel: "stylesheet",
    href: url,
    type: "text/css"
}));

2012-11-21 16:17:35

下面是如何直接应用CSS代码，而不使用<link>来加载额外的样式表。

var head = jQuery("#iframe").contents().find("head");
var css = '<style type="text/css">' +
          '#banner{display:none}; ' +
          '</style>';
jQuery(head).append(css);

这将在iframe页面中隐藏横幅。谢谢你的建议!

2013-10-15 22:47:12

如果你有访问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

我找到了另一个解决方案，把样式放在主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

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

2008-10-20 08:37:01

如何将CSS应用到iframe?

推荐文章

最新文章

标签