使用 CSS 影响 iframe 中的 div 样式

Posted 2023-02-16

【中文标题】使用 CSS 影响 iframe 中的 div 样式

【英文标题】：Using CSS to affect div style inside iframe

【发布时间】：2010-10-09 16:25:48

【问题描述】：

是否可以仅使用 CSS 更改位于页面 iframe 内的 div 的样式？

【问题讨论】：

How to apply CSS to iframe?的可能重复

更多关于 CORS 的信息：wikipedia.org/wiki/Content_Security_Policy 和 developer.mozilla.org/docs/Web/HTTP/CORS

【参考方案1】：

你需要 javascript。这与在父页面中执行此操作相同，只是您必须在 JavaScript 命令前加上 iframe 的名称。

请记住，同源策略适用，因此您只能对来自您自己的服务器的 iframe 元素执行此操作。

我使用Prototype 框架使其更容易：

frame1.$('mydiv').style.border = '1px solid #000000'

或

frame1.$('mydiv').addClassName('withborder')

【讨论】：

看看我的这个问题，它类似于***.com/questions/1962707/…，但如果框架来自另一台服务器，我们不能改变样式吗？

没错。 Iframe 内容受同域策略的约束。如果它来自您的域，您可以控制它，如果不是，您将被锁定。这可以防止各种基于 iframe 的页面劫持。

不完全是“纯 CSS”解决方案，但对我来说已经足够了。 +1

这不是 CSS。

【参考方案2】：

总之没有。

您不能将 CSS 应用于加载到 iframe 中的 html，除非由于跨域资源限制，您可以控制加载到 iframe 中的页面。

【讨论】：

这是真的，但并不能真正帮助人们举例说明如何做

这是 2018 年才出现的吗？我记得我以前配置 iframe 的样式来自外部。我尝试将 css 应用于由脚本呈现的 iframe，但它仍然无法正常工作。l

【参考方案3】：

是的。看看这个其他线程的详细信息： How to apply CSS to iframe?

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

【讨论】：

frame1 是 iframe 的 id 吗？？

是的，frame1 是 iframe 的 id。

这不是 CSS。

如果我们在 iframe 中加载不同的域，我们无法做到这一点。

frame1 是 iframe 名称，而不是 ID

【参考方案4】：

您可以先检索iframe 的内容，然后照常使用jQuery 选择器。

$("#iframe-id").contents().find("img").attr("style","width:100%;height:100%")

$("#iframe-id").contents().find("img").addClass("fancy-zoom")

$("#iframe-id").contents().find("img").onclick(function() zoomit($(this)); );

祝你好运！

【讨论】：

不起作用：未捕获的 DOMException：无法从 'HTMLIFrameElement' 读取 'contentDocument' 属性：阻止具有源“HOST”的框架访问跨域框架。

@tubbo，在您的情况下，您不能嵌入未经授权的站点以阻止 XSS。这仅适用于那些寻找自己问题的人，而不是黑客：p

【参考方案5】：

快速回答是：不，抱歉。

仅使用 CSS 是不可能的。您基本上需要控制 iframe 内容才能对其进行样式设置。有一些方法使用 javascript 或您选择的网络语言（我已经读过一点，但我自己不熟悉）来动态插入一些需要的样式，但是您需要直接控制 iframe 内容，这听起来就像你没有一样。

【参考方案6】：

使用 Jquery 并等待源代码加载完毕， 这就是我实现的方式（使用角度间隔，您可以使用javascript setInterval 方法）：

var addCssToIframe = function() 
    if ($('#myIframe').contents().find("head") != undefined) 
        $('#myIframe')
                .contents()
                .find("head")
                .append(
                        '<link rel="stylesheet" href="app/css/iframe.css" type="text/css" />');
        $interval.cancel(addCssInterval);
    
;
var addCssInterval = $interval(addCssToIframe, 500, 0, false);

【讨论】：

为什么不使用 iframe 加载事件？

【参考方案7】：

显然可以通过 jQuery 来完成：

$('iframe').load( function() 
    $('iframe').contents().find("head")
      .append($("<style type='text/css'>  .my-classdisplay:none;  </style>"));
);

https://***.com/a/13959836/1625795

【讨论】：

由于 Chrome 浏览器的同源策略，您不能再使用它了。错误信息：Uncaught DOMException: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin **** from accessing a cross-origin frame.

@adamj，我们可以更改覆盖 iframe 元素的样式表吗？如果是，请添加脚本。

如果您不使用域外其他网页的内容，这是一个很好的答案，但如果您正在处理与您自己的网页相关的内容，这是一个完美的答案。就像将图像上传到 iframe 中一样，这是一个很好的解决方案。谢谢@adamj

【参考方案8】：

结合不同的解决方案，这对我有用。

$(document).ready(function () 
    $('iframe').on('load', function() 
        $("iframe").contents().find("#back-link").css("display", "none");
    ); 
);

【参考方案9】：

可能不是你想的那样。 iframe 也必须在 css 文件中 <link> 。如果它位于不同的域中，即使使用 javascript 也无法做到这一点。

【讨论】：

你能举个例子说明如何做到这一点吗？你的意思是像<iframe src="/source" link=css-stylesheet:"/css.css">这样的东西吗？

@Ant 不，对于跨域 iframe，可嵌入站点需要在其自己的 HTML 中包含 <link> 标记。如果框架的源位于同一个父域中，那么您可以使用 JavaScript 注入样式标记（或内联样式）。

【参考方案10】：

一种 hack-ish 的做事方式就像 Eugene 所说的那样。我最终遵循他的代码并链接到我的页面的自定义 Css。对我来说，问题是，有了 twitter 时间线，你必须避开 twitter 来稍微覆盖他们的代码。现在我们有了一个滚动的时间线，其中包含我们的 CSS，即 I.E。更大的字体，适当的行高，并在超出其限制的高度隐藏滚动条。

var c = document.createElement('link');
setTimeout(frames[0].document.body.appendChild(c),500); // Mileage varies by connection. Bump 500 a bit higher if necessary

【讨论】：

这可能是非常有问题的，因为您无法确保超时将是正确的值。我正在尝试相同的实现并选择使用上述海报解决方案，因为它可以由 iframe 内容 onload 事件直接触发。查看 adamj 的回答

【参考方案11】：

从客户端不可能。由于 iframe 不是您的域的一部分，因此将引发 javascript 错误“错误：访问属性“文档”的权限被拒绝”。 唯一的解决方案是从服务器端代码中获取页面并更改所需的 CSS。

【讨论】：

这个答案的内容是正确的，但与 JavaScript 相关，而问题与 CSS 相关。答案可能是您需要使用 JavaScript，但您没有这么说。答案还假设 iFrame 中的内容来自不同的域，但情况并非总是如此。最后，确切的消息会因浏览器而异。

【参考方案12】：

只需添加这个，一切正常：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

【讨论】：

不确定这是否是给定问题的正确答案，但这是将 Google 表单调整为设备宽度的绝佳解决方案，非常感谢！

@shiftyscales 我已经在其中一个应用程序中尝试过，它运行良好

【参考方案13】：

是的，虽然很麻烦，但这是可能的。您需要将页面的 HTML 打印/回显到页面的正文中，然后应用 CSS 规则更改功能。使用上面给出的相同示例，您实际上将使用一种解析方法来查找页面中的 div，然后对其应用 CSS，然后将其重新打印/回显给最终用户。我不需要这个，所以我不想将该函数编码到另一个网页的 CSS 中的每个项目中，只是为了 aphtply。

参考资料：

Printing content of IFRAME Accessing and printing HTML source code using php or JavaScript http://www.w3schools.com/js/js_htmldom_html.asp http://www.w3schools.com/js/js_htmldom_css.asp

【讨论】：

该问题专门询问“仅使用 CSS”。考虑到这一点，你的答案是错误的。

这不是 CSS。