html - mdn - 如何将CSS应用于iframe?




iframe高度自适应 (18)

我有一个简单的页面,有一些iframe部分(显示RSS链接)。 我怎样才能将主页中的相同CSS格式应用到iframe中显示的页面?


编辑:除非设置了适当的CORS头,否则这不起作用。

这里有两个不同的东西:iframe块的样式和嵌入在iframe中的页面样式。 您可以通过常规方式设置iframe块的样式:

<iframe name="iframe1" id="iframe1" src="empty.htm" 
        frameborder="0" border="0" cellspacing="0"
        style="border-style: none;width: 100%; height: 120px;"></iframe>

嵌入在iframe中的页面样式必须通过将其包含在子页面中来设置:

<link type="text/css" rel="Stylesheet" href="Style/simple.css" />

或者它可以用Javascript的父页面加载:

var cssLink = document.createElement("link");
cssLink.href = "style.css"; 
cssLink.rel = "stylesheet"; 
cssLink.type = "text/css"; 
frames['iframe1'].document.body.appendChild(cssLink);

上面有一点改动的作品:

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上正常工作


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

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

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



其他答案似乎使用jQuery和CSS链接。

此代码使用了vanilla 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);

大多数浏览器通常将iframe作为不同的HTML页面进行处理。 如果您想将相同的样式表应用于iframe的内容,只需从其中使用的页面引用它。


如果你想在主页面重用CSS和JavaScript,你应该考虑用一个Ajax加载的内容替换<IFRAME> 。 搜索僵尸程序能够执行JavaScript时,这更加适合搜索引擎优化。

这是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>

您还可以直接从Google包含jQuery: http://code.google.com/apis/ajaxlibs/documentation/ : http://code.google.com/apis/ajaxlibs/documentation/ - 这意味着可选择自动包含较新版本并显着提高速度。 此外,意味着你必须相信它们才能为你提供jQuery;)


如果你控制iframe中的页面,就像hangy说的那样,最简单的方法是创建一个具有常见样式的共享CSS文件,然后从你的html页面链接到它。

否则,您不太可能能够从iframe的外部页面动态更改页面的样式。 这是因为浏览器由于欺骗和其他黑客可能被滥用而加强了跨框架DOM脚本的安全性。

本教程可能会为您提供有关脚本iframe的更多信息。 关于跨帧脚本解释了来自IE浏览器的安全限制。


当你说“doc.open()”时,这意味着你可以在iframe中写入任何HTML标签,所以你应该为HTML页面编写所有基本标签,并且如果你想在iframe头部有一个CSS链接,只需写一个带有CSS链接的iframe。 我给你举个例子:

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();

您将无法以这种方式设置iframe的内容。 我的建议是使用服务器端脚本(PHP,ASP或者Perl脚本)或者找到一个在线服务,将一个feed转换为JavaScript代码。 唯一的办法就是如果你可以做一个服务器端的包含。


我发现了另一种解决方案,把样式放在主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>

它可能不是最好的解决方案,它当然可以改进,但如果你想在父窗口中保留一个“样式”标签,这是另一种选择


我在Google日历上遇到了这个问题。 我想在较暗的背景上设计它,并更改字体。

幸运的是,嵌入代码的URL对直接访问没有限制,所以通过使用PHP函数file_get_contents ,可以从页面获取整个内容。 可以调用位于服务器上的一个php文件,而不是调用Google URL,例如。 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);

(这会将您的样式表放在head标签前面)。

在相对调用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>

祝你好运!


我认为最简单的方法是在iframe的相同位置添加另一个div

使它的z-index大于iframe容器,所以你可以简单地设计你自己的div。 如果你需要点击它,只需在你自己的div上使用pointer-events:none ,这样iframe就可以工作,以防你需要点击它;)

我希望它会帮助某人;)


扩展上述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();
});

有一个美妙的脚本 ,用它自己的iframe版本替换节点。 CodePen 演示

用法示例:

// Single node
var component = document.querySelector('.component');
var iframe = iframify(component);

// Collection of nodes
var components = document.querySelectorAll('.component');
var iframes = Array.prototype.map.call(components, function (component) {
  return iframify(component, {});
});

// With options
var component = document.querySelector('.component');
var iframe = iframify(component, {
  headExtra: '<style>.component { color: red; }</style>',
  metaViewport: '<meta name="viewport" content="width=device-width">'
});

这里,域内有两件事

  1. iFrame部分
  2. 加载到iFrame中的页面

所以你想要如下设置这两个部分的样式,

1. iFrame部分的样式

它可以使用具有尊敬的idclass名称的CSS进行设计。 您也可以在您的父级样式表中设置样式。

<style>
#my_iFrame{
height: 300px;
width: 100%;
position:absolute;
top:0;
left:0;
border: 1px black solid;
}
</style>

<iframe name='iframe1' id="my_iFrame" src="#" cellspacing="0"></iframe>

2.在iFrame内放置页面样式

这种样式可以在Javascript的帮助下从父页面加载

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

然后将该CSS文件设置为尊重的iFrame部分

//to Load in the Body Part
frames['my_iFrame'].document.body.appendChild(cssFile); 
//to Load in the Head Part
frames['my_iFrame'].document.head.appendChild(cssFile);

在这里,您可以使用这种方式编辑iFrame内的页面的头部分

var $iFrameHead = $("#my_iFrame").contents().find("head");
$iFrameHead .append(
   $("<link/>",{ 
      rel: "stylesheet", 
      href: urlPath , 
      type: "text/css" }
     ));

var link1 = document.createElement('link');
    link1.type = 'text/css';
    link1.rel = 'stylesheet';
    link1.href = "../../assets/css/normalize.css";
window.frames['richTextField'].document.body.appendChild(link1);


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

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






iframe