首页 文章

如何将CSS应用于iframe？

提问于
浏览 次
890

我有一个简单的页面，有一些iframe部分（显示RSS链接） . 如何将主页面中的相同CSS格式应用于iframe中显示的页面？

html css iframe

26 回答

  • 0

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

    使其 z-index 大于iframe容器，因此您可以轻松地设置自己的div样式 . 如果你需要点击它，只需在你自己的div上使用 pointer-events:none ，所以如果你需要点击它就会运行iframe;）

    我希望它会帮助某人;）

    回复于
  • 2

    扩展上述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();
});
    回复于
  • 12

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

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

    回复于
  • 24

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

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

    This tutorial可能会为您提供有关脚本编写iframe的更多信息 . About cross frame scripting从IE角度解释了安全限制 .

    回复于
  • 8

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

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

    回复于
  • 70

    最好的方法可能是以下（如果您控制目标站点）：

    1）使用 style 参数设置iframe链接，如：

    http://your_site.com/target.php?style=a%7Bcolor%3Ared%7D

    （最后一个短语是由 urlencode 函数编码的 a{color:red} .

    2）设置接收器页面 target.php 如下：

    <head>
..........
<style><? echo urldecode($_GET['style']);?> </style>
..........
    回复于
  • -1

    我的 compact version ：

    <script type="text/javascript">
$(window).load(function () {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }   
});
</script>

    但是，有时 iframe 在窗口加载时尚未就绪，因此需要使用 timer .

    Ready-to-use code （带计时器）：

    <script type="text/javascript">
var frameListener;
$(window).load(function () {
    frameListener = setInterval("frameLoaded()", 50);
});
function frameLoaded() {
    var frame = $('iframe').get(0);
    if (frame != null) {
        var frmHead = $(frame).contents().find('head');
        if (frmHead != null) {
            clearInterval(frameListener); // stop the listener
            frmHead.append($('style, link[rel=stylesheet]').clone()); // clone existing css link
            //frmHead.append($("<link/>", { rel: "stylesheet", href: "/styles/style.css", type: "text/css" })); // or create css link yourself
        }
    }
}
</script>

    ...和jQuery链接：

    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js" type="text/javascript"></script>
    回复于
  • 3

    有一个wonderful script用一个iframe版本替换一个节点 . CodePen Demo

    Usage Examples:

    // 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">'
});
    回复于
  • 3
    var $head = $("#eFormIFrame").contents().find("head");

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

    以下对我有用 .

    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();
    回复于
  • 181

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

    这是jQuery示例，其中包含文档中的另一个html页面 . 这比 iframe 更加SEO友好 . 为了确保机器人没有索引包含的页面，只需将其添加到 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/ - 这意味着可选的自动包含更新的版本和一些显着的速度提升 . 此外，意味着你必须信任它们只为你提供jQuery;）

    回复于
  • 0

    如果您有权访问iframe页面并且只有在您通过页面上的iframe加载时才想要使用其他CSS，这里我找到了解决这些问题的方法

    即使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>');

});
    回复于
  • 2

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

    回复于
  • 20

    我用 Google Calendar 遇到了这个问题 . 我想在较暗的背景上设计它并更改字体 .

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

    祝好运！

    回复于
  • 2

    好吧，我遵循了以下步骤：

    • Div持有一个类 iframe

    • 将 iframe 添加到 div .

    • 在CSS文件中，

    divClass { width: 500px; height: 500px; }
divClass iframe { width: 100%; height: 100%; }

    这适用于IE 6.应该在其他浏览器中工作，请检查！

    回复于
  • 8

    当你说“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();
    回复于
  • -15

    作为替代方案，您可以使用CSS-in-JS技术，如下面的lib：

    https://github.com/cssobj/cssobj

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

    回复于
  • 0

    以上稍作改动的工作原理：

    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至少

    回复于
  • 0

    Edit: 除非设置了适当的CORS header，否则这不适用于跨域 .

    这里有两个不同的东西：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.head.appendChild(cssLink);
    回复于
  • 26

    我们可以在iframe中插入样式标签 . Posted also here...

    <style type="text/css" id="cssID">
.className
{
    background-color: red;
}
</style>

<iframe id="iFrameID"></iframe>

<script type="text/javascript">
    $(function () {
        $("#iFrameID").contents().find("head")[0].appendChild(cssID);
        //Or $("#iFrameID").contents().find("head")[0].appendChild($('#cssID')[0]);
    });
</script>
    回复于
  • 52

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

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

    这会在iframe页面中隐藏 Banner . 谢谢你的建议！

    回复于
  • 35

    这里，域内有两件事

    • iFrame部分

    • 页面在iFrame中加载

    所以你想要按如下方式设计这两个部分，

    1. Style for the iFrame Section

    它可以使用具有受尊重的 id 或 class 名称的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. Style the Page Loaded inside the iFrame

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

    var cssFile  = document.createElement("link") 
cssFile.rel  = "stylesheet"; 
cssFile.type = "text/css"; 
cssFile.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" }
     ));
    回复于
  • 11

    使用可以试试这个：

    $('iframe').load( function() {
     $('iframe').contents().find("head")
     .append($("<style type='text/css'>  .my-class{display:none;}  </style>"));
  });
    回复于
  • 6

    这里的其他答案似乎使用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);
    回复于
  • 5
    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);
    回复于
  • 392

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

    回复于

相关问题