Html 如何将 CSS 应用于 iframe？

How to apply CSS to iframe?

提问by

I have a simple page that has some iframe sections (to display RSS links). How can I apply the same CSS format from the main page to the page displayed in the iframe?

我有一个简单的页面，其中包含一些 iframe 部分（以显示 RSS 链接）。如何将相同的 CSS 格式从主页应用到 iframe 中显示的页面？

回答by Tamas Czinege

Edit:This does not work cross domain unless the appropriate CORS headeris set.

编辑：除非设置了适当的CORS 标头，否则这不适用于跨域。

There are two different things here: the style of the iframe block and the style of the page embedded in the iframe. You can set the style of the iframe block the usual way:

这里有两个不同的东西：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>

The style of the page embedded in the iframe must be either set by including it in the child page:

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

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

Or it can be loaded from the parent page with Javascript:

或者它可以使用 Javascript 从父页面加载：

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

回答by SequenceDigitale.com

I met this issue with Google Calendar. I wanted to style it on a darker background and change font.

我在使用Google Calendar 时遇到了这个问题。我想在较暗的背景上设置样式并更改字体。

Luckily, the URL from the embed code had no restriction on direct access, so by using PHP function file_get_contentsit is possible to get the entire content from the page. Instead of calling the Google URL, it is possible to call a php file located on your server, ex. google.php, which will contain the original content with modifications:

幸运的是，嵌入代码中的 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');

Adding the path to your stylesheet:

将路径添加到样式表：

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

(This will place your stylesheet last just before the headend tag.)

（这会将您的样式表放在head结束标记之前。）

Specify the base url form the original url in case css and js are called relatively:

如果css和js相对调用，请指定原始url的基本url：

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

The final google.phpfile should look like this:

最终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;

Then you change the iframeembed code to:

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

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

Good luck!

祝你好运！

回答by Horst Gutmann

If the content of the iframe is not completely under your control or you want to access the content from different pages with different styles you could try manipulating it using JavaScript.

如果 iframe 的内容不完全在您的控制之下，或者您想从不同页面访问具有不同样式的内容，您可以尝试使用 JavaScript 对其进行操作。

var frm = frames['frame'].document;
var otherhead = frm.getElementsByTagName("head")[0];
var link = frm.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("type", "text/css");
link.setAttribute("href", "style.css");
otherhead.appendChild(link);

Note that depending on what browser you use this might only work on pages served from the same domain.

请注意，根据您使用的浏览器，这可能仅适用于来自同一域的页面。

回答by Rami Sarieddine

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

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

回答by domih

Here is how to apply CSS code directly without using <link>to load an extra stylesheet.

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

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

This hides the banner in the iframe page. Thank you for your suggestions!

这会隐藏 iframe 页面中的横幅。谢谢你的建议！

回答by hangy

An iframe is universally handled like a different HTML page by most browsers. If you want to apply the same stylesheet to the content of the iframe, just reference it from the pages used in there.

大多数浏览器都像处理不同的 HTML 页面一样普遍处理 iframe。如果要将相同的样式表应用于 iframe 的内容，只需从其中使用的页面中引用它。

回答by Ash

If you control the page in the iframe, as hangy said, the easiest approach is to create a shared CSS file with common styles, then just link to it from your html pages.

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

Otherwise it is unlikely you will be able to dynamically change the style of a page from an external page in your iframe. This is because browsers have tightened the security on cross frame dom scripting due to possible misuse for spoofing and other hacks.

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

This tutorialmay provide you with more information on scripting iframes in general. About cross frame scriptingexplains the security restrictions from the IE perspective.

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

回答by Ash

The above with a little change works:

以上稍加改动即可工作：

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

Works fine with ff3 and ie8 at least

至少适用于 ff3 和 ie8

回答by sorin

If you want to reuse CSS and JavaScript from the main page maybe you should consider replacing <IFRAME>with a Ajax loaded content. This is more SEO friendly now when search bots are able to execute JavaScript.

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

This is jQueryexample that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in robots.txt

这是一个jQuery示例，它在您的文档中包含另一个 html 页面。这比 SEO 更友好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>

You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/- this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)

您还可以直接从 Google 包含 jQuery：http: //code.google.com/apis/ajaxlibs/documentation/- 这意味着可选的自动包含新版本和一些显着的速度提升。此外，这意味着您必须信任他们只为您提供 jQuery ;)

回答by peter

The following worked for me.

以下对我有用。

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